Skip to content
MiTu

MiTu

A Web developer who loves to Reading and photography

如何通过 css 实现一个扇形

也就是在三角形基础上加一个边框 border-radius:100px;

方法一

让盒子的宽高为 0,给他任意 3 条边框设置透明并为没有设置透明的边框设置背景色,给他设置边框 border-radius:100px;

css
.box {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid orange;
  border-left: 50px solid transparent;
  border-radius: 100px;
}

方法二

让盒子的宽高为 0,让上边 border 和右边 border 是同一颜色,让下边 border 和左边 border 是透明,给他设置边框 border-radius:100px;

css
.box {
  width: 0;
  height: 0;
  border-top: 50px solid orange;
  border-right: 50px solid orange;
  border-bottom: 50px solid transparent;
  border-left: 50px solid transparent;
  border-radius: 100px;
}