Question posted in 
I am creating a website for the Google DSC club at my University, and I wanted to add a Google One style border to the circular portfolio images on the site.
I was wondering how to accomplish this using CSS, but pre-rendered Photoshop or Illustrator tricks would also do.
I tried to modify some the code as given in this answer, but I wasn’t able to achieve the perfect effect.
.test {
margin: 25px 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px solid transparent;
background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(30deg, #ea4335 36%, #4285f4 30%),
linear-gradient(120deg, #4285f4 36%, #34a853 30%),
linear-gradient(300deg, #fbbc04 36%, #ea4335 30%),
linear-gradient(210deg, #34a853 36%, #fbbc04 30%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box, border-box;
background-clip: content-box, border-box, border-box, border-box, border-box;
transform: rotate(90deg);
}<div class="test"></div>As you can see, the border colors are not aligned correctly.
Is there any way to accomplish this using an easier method?
Thank you!
2
Answers
SVG option
To create multi-colored sectors of a circle, use
stroke-dasharrayCalculation of lengths of lines and spaces:
For the radius
R = 100pxcircumference =2 * 3.1415 * 100 = 628.3 pxTo get the line equal to one fourth of the circle, we calculate the attributes
stroke-dasharray628.3 / 4 = 157.075Space will be 3/4 of the circle length =471pxBut since the length of the blue, red and green sectors is a little more than a quarter of a circle, we add this difference. stroke-dasharray = “183.255 445.045”
stroke-dashoffset = "78.54"shifts the beginning of the sector by 1/8 of the circumferenceExample for one sector
And also we set attributes for other color sectors.
Add an image and cut it using a mask to fit the circles
The solution is adaptive and works the same in all modern browsers, including
IE11,EdgeUPDATE
OP did not ask, but perhaps this supplement will be useful to him or someone else.
SVG+CSS animation
To spice up your application I add animation options.
#1. Animation of rotation of the stroke around the image
Wrap all the circles that form a multicolored line with the group tag
<g>fill ="none"replace withfill ="transparent"for theanimation to work when you hover over the whole circle
2.# Animation of image rotation when hovering
CSS rules are used to implement rotation of images
tiny
svgsolution with masks