[英]How to segment a circle with different colors using CSS
我希望能够绘制一个带有一段其他颜色的圆圈,我希望覆盖的一段数量能够以10%
增量从0%
增加到100%
。
Google上的所有示例都是所有行业而不是细分市场
到目前为止,这是我能够提出的最好的:
div.outerClass { position: absolute; left: 10px; top: 10px; height: 2.5px; overflow: hidden; -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ transform: rotate(270deg); } div.innerClass { width: 10px; height: 10px; border: 5px solid green; border-radius: 36px; }
<div class="outerClass"> <div class="innerClass"></div> </div>
0%
, 50%
和100%
我都能做到。
你可以使用linear-gradient
来做到这一点
.circle{ position:absolute; width:80px; height:80px; border-radius:50%; background: linear-gradient( to right, yellow 0%, yellow 10%, orange 10%, orange 20%, yellow 20%, yellow 30%, orange 30%, orange 40%, yellow 40%, yellow 50%, orange 50%, orange 60%, yellow 60%, yellow 70%, orange 70%, orange 80%, yellow 80%, yellow 90%, orange 90%, orange 100% ); }
<div class="circle"></div>
否则你可以在overflow:hidden
放入10
个子元素overflow:hidden
圆形父元素:
.circle{ position:absolute; width:80px; height:80px; border-radius:50%; overflow:hidden; } .circle > span{ width:10%; height:100%; float:left; } .circle > span:nth-child(1){ background: yellow;} .circle > span:nth-child(2){ background: orange;} .circle > span:nth-child(3){ background: blue;} .circle > span:nth-child(4){ background: green;} .circle > span:nth-child(5){ background: fuchsia;} .circle > span:nth-child(6){ background: orange;} .circle > span:nth-child(7){ background: gold;} .circle > span:nth-child(8){ background: tan;} .circle > span:nth-child(9){ background: navy;} .circle > span:nth-child(10){background: brown;}
<div class="circle"> <span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span> </div>
跨浏览器解决方案:
.circle { border-radius: 50%; background: gray; width: 300px; height: 300px; overflow: hidden; } .segment { float: left; width: 10%; height: 100%; } .segment_1 { background: red; } .segment_2 { background: green; } .segment_3 { background: yellow; } .segment_4 { background: blue; }
<div class="circle"> <div class="segment segment_1"></div> <div class="segment segment_2"></div> <div class="segment segment_3"></div> <div class="segment segment_4"></div> </div>
另一种方法可能是使用一个元素和盒子阴影。
主要元素是圆( border-radius: 50%;
),纵横比为1:1。
假元素位于left: -100%;
,或者只是左边的主要元素。
10个盒子阴影应用于伪元素,具有不同的颜色和不同的横坐标。 我把横坐标设为30px,因为30px是300px的10%...
选择10%的宽度是因为需要10个条纹。
div { height: 300px; width: 300px; border: 1px solid black; position: relative; border-radius: 50%; overflow: hidden; } div:before { position: absolute; content: ''; height: inherit; width: inherit; left: -100%; background: red; box-shadow: 30px 0 0 chocolate, 60px 0 0 hotpink, 90px 0 0 indigo, 120px 0 0 orangered, 150px 0 0 gold, 180px 0 0 deepskyblue, 210px 0 0 springgreen, 240px 0 0 darkslategray, 270px 0 0 gold, 300px 0 0 navy; }
<div></div>
另一种方法是使用SVG。 这些段由<rect />
元素组成,并使用<clipPath/>
元素将它们剪切为圆形:
svg{width:40%;display:block;margin:0 auto;} use:hover{fill:#000;}
<svg viewBox="0 0 10 10"> <defs> <clipPath id="circle"> <circle cx="5" cy="5" r="5" /> </clipPath> <rect id="seg" y="0" width="1" height="10" /> </defs> <g clip-path="url(#circle)"> <use xlink:href="#seg" x="0" fill="pink"/> <use xlink:href="#seg" x="1" fill="green" /> <use xlink:href="#seg" x="2" fill="orange" /> <use xlink:href="#seg" x="3" fill="teal" /> <use xlink:href="#seg" x="4" fill="tomato"/> <use xlink:href="#seg" x="5" fill="gold"/> <use xlink:href="#seg" x="6" fill="darkorange" /> <use xlink:href="#seg" x="7" fill="pink" /> <use xlink:href="#seg" x="8" fill="red" /> <use xlink:href="#seg" x="9" fill="yellow" /> </g> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.