利用CSS,‘画’一个饼形四分图

 时间:2026-02-13 12:41:17

1、首先看下我们的html代码,非常的简单,就是一个div,

利用CSS,‘画’一个饼形四分图

2、然后为这个div添加样式,先添加borde样式为

border: 80px solid #ccc;

然后把长,宽设置为0:

width: 0;height: 0;

利用CSS,‘画’一个饼形四分图

3、现有代码运行,就是一个深灰色的正方形。

利用CSS,‘画’一个饼形四分图

4、再添加样式,为四个边添加不同的颜色,

border-right-color: #f91e1e;border-bottom-color: #127a98;border-top-color: #ad1fa1;border-left-color: #75c073;

这些颜色可以自行修改成其他的颜色。

利用CSS,‘画’一个饼形四分图

5、现在运行效果如图,四个小三角形拼成的正方形。

利用CSS,‘画’一个饼形四分图

6、为了让其显示成饼形,我们还需要添加一个样式,

border-radius: 87px;

添加这个可以让正方形显示成圆形。

利用CSS,‘画’一个饼形四分图

7、最终的成品效果了,就是四等份的饼形图。

利用CSS,‘画’一个饼形四分图

  • PPT使用中如何插入堆积柱形图
  • ppt添加红色框圈出来
  • 扇形图怎么显示百分比和数据
  • WPS PPT中怎么对插入的形状进行设置
  • Excel饼图制作流程
  • 热门搜索
    鼻子黑头怎么办 如何使用蓝牙耳机 芦荟胶怎么辨别真假 睡不着发朋友圈配图 毛里求斯旅游 脸上长痘痘怎么去除 信用卡不还款会怎么样 怎么样能祛斑 结婚证在哪里办 怎么重启路由器