Html 使用CSS在圆中绘制半径线

我想知道如何根据给定的度数从圆心向外画一条线到边界。（我最终希望每30度有一条线，总共有12条线）

下面是一幅与我试图实现的目标类似的图片

我目前拥有的圆圈的CSS：

.circle-container{
    display: block;
    position: absolute;
    top: 15.5%;
    left: 14.5%;
    background: #fff;
    width: 11.5em;
    height: 11.5em;
    border-radius: 50%;
    border-style: solid;
    border-width: thin;
    border-color: #bfbfbf;
    margin: 0em;
}

---

我不确定应该从哪里开始。

画布元素或SVG会更容易，但是如果您只想使用简单HTML元素的CSS样式，请参阅本教程以创建CSS时钟：

---

画布元素或SVG会更简单，但如果您只想使用简单HTML元素的CSS样式，请参阅本教程以创建CSS时钟：

---

我会使用Canvas或SVG……否则，您最终会得到许多非语义元素，只是为了进行样式设计

然而，一个简单的例子

.circle容器{
显示：块；
位置：绝对位置；
最高：15.5%；
左：14.5%；
背景：#fff；
宽度：11.5em；
身高：11.5公分；
边界半径：50%；
边框样式：实心；
边界宽度：薄；
边框颜色：#bfbf；
边距：0em；
}
.半径{
位置：绝对位置；
宽度：50%；
高度：3倍；
左：50%；
最高：50%；
背景：红色；
变换原点：左中心；
}
.二{
背景：绿色；
变换：旋转（-30度）；
}

---

我会使用Canvas或SVG……否则，您最终会得到许多非mantic元素，仅用于样式设计

然而，一个简单的例子

.circle容器{
显示：块；
位置：绝对位置；
最高：15.5%；
左：14.5%；
背景：#fff；
宽度：11.5em；
身高：11.5公分；
边界半径：50%；
边框样式：实心；
边界宽度：薄；
边框颜色：#bfbf；
边距：0em；
}
.半径{
位置：绝对位置；
宽度：50%；
高度：3倍；
左：50%；
最高：50%；
背景：红色；
变换原点：左中心；
}
.二{
背景：绿色；
变换：旋转（-30度）；
}

---

通过将“高度”属性设置为0，将“宽度”设置为

50%

，即直径的一半，并创建边框，可以创建线条

要进行变换，您需要使用

旋转

属性以及

变换原点

下面是一个简单的例子

var radius=document.getElementById（“radius”）；
var rotate=document.getElementById（“rotate”）；
var旋转=0；
rotate.addEventListener（“单击”，函数（）{
旋转-=30；
radius.style.transform=“旋转（“+旋转+”度）”；
radius.style.transformOrigin=“中间偏右”；
});
.circle容器{
显示：块；
位置：绝对位置；
最高：15.5%；
左：14.5%；
背景：#fff；
宽度：11.5em；
身高：11.5公分；
边界半径：50%；
边框样式：实心；
边界宽度：薄；
边框颜色：#bfbf；
边距：0em；
}
#半径{
高度：0px；
宽度：50%；
边框：1px纯黑；
最高：50%；
位置：绝对位置；
}

旋转半径
通过将“高度”属性设置为0，将“宽度”设置为直径的一半，并创建边框，可以创建一条线

要进行变换，您需要使用
旋转
属性以及
变换原点

下面是一个简单的例子


var radius=document.getElementById（“radius”）；
var rotate=document.getElementById（“rotate”）；
var旋转=0；
rotate.addEventListener（“单击”，函数（）{
旋转-=30；
radius.style.transform=“旋转（“+旋转+”度）”；
radius.style.transformOrigin=“中间偏右”；
});
.circle容器{
显示：块；
位置：绝对位置；
最高：15.5%；
左：14.5%；
背景：#fff；
宽度：11.5em；
身高：11.5公分；
边界半径：50%；
边框样式：实心；
边界宽度：薄；
边框颜色：#bfbf；
边距：0em；
}
#半径{
高度：0px；
宽度：50%；
边框：1px纯黑；
最高：50%；
位置：绝对位置；
}

旋转半径（Rotate Radius）
如果你想要超灵活的东西，我会这样做……你可以添加另一条带ID的线，并给每一条线单独旋转，以获得所有角度

.line{
    width: 1px;
    height: 50%;
    background: #000;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.line:before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #000;
}

<div class="circle-container">
    <div class="line"></div>
</div>

.line{
宽度：1px；
身高：50%；
背景：#000；
显示：块；
位置：绝对位置；
排名：0；
左：50%；
变换原点：底部中心；
-webkit变换原点：底部中心；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
.台词：之前{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
左：0；
转化：translateX（-50%）；
-webkit转换：translateX（-50%）；
宽度：15px；
高度：15px；
边界半径：100%；
背景：#000；
}
如果你想要超级灵活的东西，我会这样做……你可以添加另一条带ID的线，并给每个线单独旋转，以获得所有角度

.line{
    width: 1px;
    height: 50%;
    background: #000;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.line:before{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #000;
}

<div class="circle-container">
    <div class="line"></div>
</div>

.line{
宽度：1px；
身高：50%；
背景：#000；
显示：块；
位置：绝对位置；
排名：0；
左：50%；
变换原点：底部中心；
-webkit变换原点：底部中心；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
.台词：之前{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
左：0；
转化：translateX（-50%）；
-webkit转换：translateX（-50%）；
宽度：15px；
高度：15px；
边界半径：100%；
背景：#000；
}
另一个解决方案是克隆线路，正如您所说，您需要12条线路

请参见此处：

JQ:

另一个解决方案是克隆线路，正如您所说，您需要12条线路

请参见此处：

JQ:

我会使用SVG…否则你会得到很多非语义元素，只是为了设计样式。或者画布元素我会使用SVG…否则你会得到w
<div class="circle-container">
    <div class="line">

    </div>

</div>

.circle-container:before {
  position:absolute;
  content:"";
  width:30px;
  height:30px;
  background:#000;
  left:0;
  right:0;
  margin:0 auto;
  top:calc(50% - 15px);
  border-radius:100%;
}
.circle-container .line {
  position: absolute;
  width: 50%;
  height: 3px;
  left: 50%;
  top: 50%;
  background: #000;
  transform-origin: left center;
  transform: rotate(0deg);
}