在CSS3中图像的圆形旋转边框

Question

Is it possible to have rounded rotated borders in CSS3. I want to process my image like attached image here.

how would you do it? Thanks!!

Answer 1

Yes, it's possible.

First, you need to use a graphic tool like Photoshop or Paint.Net to rotate your image first to the degrees that you like, for example 45 degrees. Next, you will create a rounded rectangle and rotate it using CSS like this one

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

        }

Hope this help.

Answer 2

Solved it like this thanks to Toan Nguyen answer

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