18

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.

Improve this question
1
  • 4
    Note that the prefixes for border-radius used in the original fiddle are mostly unnecessary. -webkit- is still supported but deprecated, -moz- has been removed from Firefox 13, which came out two years ago, and -ms- and -o- never existed to begin with. I strongly advise against using prefixes unless absolutely necessary. Commented May 20, 2014 at 14:58

4 Answers 4

Reset to default
26

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This is awesome. I forked it so that there are four of the little dividers because I thought OP needed them. He doesn't, but I'm leaving this here anyway on the off chance it's useful.
5

Here you have an example with sass.. (quickly Googled)

http://codepen.io/geedmo/pen/InFfd


EDIT: As requested in comments here's a little improvement with some quick tweaks to that codepen

SASS DEMO LINK

enter image description here

SASS:

// Colors $progressColor: #65C178 $pendingProgressColor: #D5EDDA $backColor: #fff /* ------------------------------------- * Avatar img * ------------------------------------- */ .avatar img border-radius: 50% border: solid 3px #fff border-width: 3px margin-top: 4px margin-left: 4px /* ------------------------------------- * Progress Bar * ------------------------------------- */ .progress-radial float: left margin-right: 30px position: relative width: 142px height: 142px border-radius: 50% border: 2px solid $backColor // remove gradient color background-color: $progressColor // default 100% /* ------------------------------------- * Mixin for progress-% class * ------------------------------------- */ $step: 5 // step of % for created classes $loops: round(100 / $step) $increment: 360 / $loops $half: round($loops / 2) @for $i from 0 through $loops .progress-#{$i*$step} @if $i < $half $nextdeg: 90deg + ( $increment * $i ) background-image: linear-gradient(90deg, $pendingProgressColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor) @else $nextdeg: -90deg + ( $increment * ( $i - $half ) ) background-image: linear-gradient($nextdeg, $progressColor 50%, transparent 50%, transparent), linear-gradient(270deg, $progressColor 50%, $pendingProgressColor 50%, $pendingProgressColor)

For the separator of the progress sections another mixin could be included

Improve this answer

7 Comments

Interesting. Although is it possible to get the spacing - like in the picture I posted?
@abhitalks This is a reference for orientation. You've got the credits on the right.
@SDude: Fair enough. It would better have been a comment in that case. An answer would warrant some explanation.
I agree with @abhitalks . You could improve on this answer by explaining the code in detail. I for one would be interested in that.
What's with the -moz-, -ms- and -o- prefixes on border-radius? -moz- has been deprecated for years and is not even supported anymore since Firefox 13, and -ms- and -o- have never existed for that property. For that matter, I doubt -webkit- is needed anymore either.
|
3

here is a solution: jsfiddle

CSS

.avatar img { border-radius: 50%; border-width: 4px; padding: 4px; background-image: linear-gradient(-90deg, #65C178 50%, rgba(0, 0, 0, 0) 50%), linear-gradient(0deg, #65C178 50%, rgba(0, 0, 0, 0) 50%); }

HTML

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

Note: change the deg value in the second linear-gradient to change the percentage filled.

Improve this answer

2 Comments

+1 This is an interesting take. But please add the relevant portion of code as part of the answer.
Agreed, however it still doesn't tackle the problem of the spacing between the borders.
2

We cant get the exact like your image. But something we can get it. Add the following line of code in your css.

border-top-color:#ff00ff; border-bottom-color:#0000ff; border-left-color:#00ff00; border-right-color:#000;

Updated jsfiddle below.

http://jsfiddle.net/vz964/1/

Improve this answer

1 Comment

This is really close. Would it be possible to add spacing between each "percentage"/new color?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.