我可以將使用div和border-radius創建的圓分成6個相等的部分，並獲得該點的坐標嗎？

Question

我想將圓（通過使用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;
 }

我可以不使用畫布就能做到嗎？

Answer 1

你可以玩這樣的東西

 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> 

或者，如果您不需要它是透明的

 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>