How do I add a Google One style multi-color border to a circular image?

问题: 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 wonder...

问题:

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!


回答1:

SVG option

To create multi-colored sectors of a circle, use stroke-dasharray

Calculation of lengths of lines and spaces:

For the radius R = 100px circumference = 2 * 3.1415 * 100 = 628.3 px

To get the line equal to one fourth of the circle, we calculate the attributes stroke-dasharray

628.3 / 4 = 157.075 Space will be 3/4 of the circle length = 471px

But 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 circumference

Example for one sector

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="250" height="250" viewBox="0 0 250 250" > 
		 
<circle cx="125" cy="125" r="100" fill="none" stroke="#d3d3d3" stroke-width="8" />		 
 		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 
 
 </svg>	 

And also we set attributes for other color sectors.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="250" height="250" viewBox="0 0 250 250" >  

		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.255 425.045" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="78.54 549.76" stroke-dashoffset="340	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="525.225	" /> 
 
 </svg>	 

Add an image and cut it using a mask to fit the circles

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="40%" height="40%" viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image xlink:href="https://i.stack.imgur.com/UsGg5.jpg" x="0" y="23" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
 </svg>	 

The solution is adaptive and works the same in all modern browsers, including IE11,Edge

UPDATE

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 with fill ="transparent" for the animation to work when you hover over the whole circle

.student {
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#gr1 {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#gr1:hover {
  -webkit-transform: rotate(720deg);
          transform: rotate(720deg);
}
<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" />	

<g id="gr1"> 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 </g>
 </svg>	
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
<g id="gr1">		 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
</g> 
 </svg>	 
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
<g id="gr1">	 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
</g> 
   </svg>	 
  </div> 
 </div>

2.# Animation of image rotation when hovering

CSS rules are used to implement rotation of images

#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.student {

background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
 </svg>	
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
 </svg>	 
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
   </svg>	 
  </div> 
 </div>


回答2:

tiny svg solution with masks

<svg viewbox="-5 -5 10 10" height="90vh">
  <defs>
    <mask id="mask1">
      <circle r="4.5" stroke="white" fill="black" stroke-width="0.5"></circle> 
    </mask>
    <mask id="mask2">
      <circle r="4"fill="white"></circle> 
    </mask>
  </defs>
  <g mask="url(#mask1)" transform="rotate(-45)">
    <rect width="7" height="7" fill="#fabb04" x="-7" y="-6"></rect>
    <rect width="7" height="7" fill="#34a852" x="-5" y="-1"></rect>
    <rect width="7" height="7" fill="#ea4335" x="-2" y="-5"></rect>
    <rect width="7" height="7" fill="#4285f4" x="0"  y="-1"></rect>
  </g>
  <image x="-4" y="-4" width="8" height="8" mask="url(#mask2)"
    xlink:href="https://i.stack.imgur.com/3q67w.gif"></image>
</svg>

  • 发表于 2019-07-05 17:57
  • 阅读 ( 174 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除