css绘制圆并绘制圆的半径
<div class="item1"></div>
.item1 {
position: relative;
width: 420px;
height: 420px;
border-radius: 50%; /* 圆形 */
color: white; /* 文本颜色 */
background-color: rgba(154, 227, 36, 0.4);
}
.item1::before {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 50%; /* 线的长度是圆的半径 */
height: 2px; /* 线的厚度 */
background: white; /* 线的颜色 */
transform-origin: 0% 0%; /* 左上角为旋转中心 */
transform: rotate(44deg); /*调整半径的位置*/
}
效果展示：
