我可以 divide 使用 div 和 border-radius 创建的圆分成 6 个相等的部分并得到那个点坐标吗？

Question

我想 divide 将圆（使用 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;
 }

我可以不使用 canvas 吗？

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>

我可以 divide 使用 div 和 border-radius 创建的圆分成 6 个相等的部分并得到那个点坐标吗？

Can I divide the circle which create by using div and border-radius into 6 equal parts and get that points coordinates?

html

javascript

css

jquery

geometry