Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Round borders separated in sections around circular image

I am wondering how it is possible to create the following effect using only CSS:

Desired output :

enter image description here

Currently, all I can think of is adding a border around the image. But how can I cut them and make sections out of them around the image?

This is my current CSS:

.avatar img {
    border-radius: 50%;
    border: solid 3px #65C178;
    border-width: 4px;
}

And HTML:

<div class="avatar"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/soffes/128.jpg" /></div>

Preview: JSFiddle Example

This only gives a border around the avatar image, not the green sections with white spacings.

like image 950
oliverbj Avatar asked May 19 '14 12:05

oliverbj


People also ask

What is border radius?

The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements! This property can have from one to four values.

Why border radius is not working?

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.


1 Answers

DEMO

Output : round borders with white spaces around circular image

Explanation

Creating the borders

  1. Use borders with border-radius to create the borders.
    step 1
  2. Then transform rotate to make the left top border appear at the right place.
    Step 2 (don't forget to "unrotate" the image by rotating it the other way so it stays vertical)

The white spaces

  1. Use pseudo elements to create the white spacings at the bottom and the right of the image.
    step 3

Unless you have very special requirements for browser support, you can remove the vendor prefixes for the border-radius property. Check canIuse for more info.

CSS :

.avatar{
    border: solid 4px #54BE69;
    border-left-color:#D5EDDA;
    padding:2px;
    display:inline-block;  
    border-radius: 50%;
    position:relative;

    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.avatar img{
    display:block;
    border-radius: 50%;

    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}
.avatar:before, .avatar:after{
    content:'';
    position:absolute;
    background:#fff;
    z-index:-1;

    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}
.avatar:before{
    height:4px;
    top:50%;
    left:2px; right:-5px;
    margin-top:-2px;
}
.avatar:after{
    width:4px;
    left:50%;
    top:2px; bottom:-5px;
    margin-left:-2px;
}
like image 198
web-tiki Avatar answered Sep 20 '22 18:09

web-tiki