округлые повернутые границы для изображений в CSS3

Question

Возможно ли иметь округлые поворотные границы в CSS3. Я хочу обработать изображение как прикрепленное изображение.

как вы это сделаете? Благодаря!!

Answer 1

Да, это возможно.

Во-первых, вам необходимо использовать графический инструмент, такой как Photoshop или Paint.Net, для поворота изображения сначала на градусы, которые вам нравятся, например 45 градусов. Далее вы создадите прямоугольник с закругленными углами и вращать его с помощью CSS, как этого один

<div class="roundedBox"> 

    </div> 


    .roundedBox 
     { 
      margin: 50px; 
      width: 150px; 
      height: 150px; 
      border: 3px solid blue; 
      -ms-border-radius: 10px; 
      border-radius: 30px; 
      -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
      overflow: hidden; 

     } 

Надеется, что это помощь.

Answer 2

решаемые его, как это благодаря Toan Нгуен ответ

<div class="image-rounded"> 
    <img src="image.jpg" alt="image" /> 
</div> 

.image-rounded{ 
    margin: 50px; 
    width: 150px; 
    height: 150px; 
    border: 3px solid blue; 
    -ms-border-radius: 10px; 
    border-radius: 30px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    overflow: hidden; 
} 

.image-rounded img{ 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    width: 200px; 
    margin-top: -25px; 
    margin-left: -25px; 
}