[英]Can I divide the circle which create by using div and border-radius into 6 equal parts and get that points coordinates?
I want to divide circle (created by using div and border-radius) into 6 equal parts and place lines (created by using li tag) to equal parts over the circle like this; 我想将圆(通过使用div和border-radius创建)划分为6个相等的部分,然后将线(通过使用li标记创建的)放置到整个圆上相等的部分,像这样;
<div class="circle">
<ul class="lines">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.circle {
width: 280px;
height: 280px;
border-radius: 50%;
}
.lines > li {
width: 10px;
height: 5px;
background-color: #fff;
}
Can I make it without using canvas? 我可以不使用画布就能做到吗?
You could play with something like this 你可以玩这样的东西
body { background: url('https://placekitten.com/g/200/300'); } .circle { width: 280px; height: 280px; border-radius: 50%; background: transparent; border: 10px solid black; position: relative; box-sizing: border-box; } .lines > li { list-style: none; height: 4px; /* line width on a circle border */ background-color: transparent; /* transparent lines inside circle */ width: 280px; /* circle diameter */ position: absolute; left: -10px; /* shift lines to left by border width */ top: calc(50% - 2px); /* shift lines by half of line height */ } .lines > li:nth-child(1) { transform: rotate(0deg); } .lines > li:nth-child(2) { transform: rotate(60deg); } .lines > li:nth-child(3) { transform: rotate(-60deg); } .lines > li:before, .lines > li:after { content: ""; position: absolute; top: 0; right: 0; width: 10px; /* width of the marks on circle border, starting from the outside of the circle */ height: 100%; background: gold; /* line marks color */ } .lines > li:after { left: 0; }
<div class="circle"> <ul class="lines"> <li></li> <li></li> <li></li> </ul> </div>
Or if you don't need it to be transparent 或者,如果您不需要它是透明的
body { background: url('https://placekitten.com/g/200/300'); } .circle { width: 280px; height: 280px; border-radius: 100%; background: white; border: 10px solid black; position: relative; box-sizing: border-box; } .lines > li { list-style: none; height: 4px; /* line width on a circle border */ background-color: white; width: 280px; /* circle diameter */ position: absolute; left: -10px; /* shift lines to left by border width */ top: calc(50% - 2px); /* shift lines by half of line height */ } .lines > li:nth-child(1) { transform: rotate(0deg); } .lines > li:nth-child(2) { transform: rotate(60deg); } .lines > li:nth-child(3) { transform: rotate(-60deg); }
<div class="circle"> <ul class="lines"> <li></li> <li></li> <li></li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.