css绘制圆并绘制圆的半径

a濯

于 2024-12-27 17:07:00 发布

阅读量465

点赞数 2

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_46738283/article/details/144773361

<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); /*调整半径的位置*/
}