CSS绘制扇形

最新推荐文章于 2024-12-16 23:12:55 发布

Bi_bu

最新推荐文章于 2024-12-16 23:12:55 发布

阅读量1k

点赞数

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/hutongxue434/article/details/107435916

版权

本文介绍了如何利用CSS3绘制扇形，通过设置两个相同颜色的半圆并旋转实现不同角度的扇形效果。不过在实际操作中遇到了边框问题，作者期待读者提供解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：在一个div中设置两个背景颜色相同的半圆，通过分别旋转这两个半圆互相遮挡来呈现各种角度的扇形。

HTML代码

<div class="shanxing">
  <div class="sx1"></div>
  <div class="sx2"></div>
</div>

CSS代码

.shanxing {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%; /* 设置border-radius为50%可以变成圆形 */
      background-color: #000000; /* 这是扇形的颜色：黑色 */
    }
.sx1,.sx2 {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 100px;
      transform: rotate(0deg);
      /* clip属性用于裁剪图像，这里把两个圆裁成两个半圆 */
      clip: rect(0px, 100px, 200px, 0px);
      background-color: #ffffff;
    }
/* 改变扇形角度，通过设置rotate的角度值 */
.shanxing .sx1 {
     transform: rotate(0deg);
   }
.shanxing .sx2 {
     transform: rotate(100deg);
   }