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 Nguyen回答

这样解决了这个问题

<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;
}