CSS 实现三角形和扇形：掌握纯 CSS 图标的艺术

2023-10-15 01:17:32

CSS 图标：点亮您网站的创意视觉元素

绘制三角形

三角形是 CSS 图标中最基本的一种，可以用多种方法绘制。一种方法是使用 border 属性，通过设置边框的宽度和颜色来创建倒三角形。另一种方法是使用伪元素，创建两个三角形，然后通过旋转它们来组合成一个倒三角形。

代码示例：

**使用边框属性：** 
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

**使用伪元素：** 
.triangle {
  width: 0;
  height: 0;
  position: relative;
}

.triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}

.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(-45deg);
}

绘制扇形

扇形也是 CSS 图标中常见的图形，可以用两种方法绘制。一种方法是使用渐变，通过设置渐变的颜色来创建扇形。另一种方法是使用伪元素，创建两个扇形，然后通过旋转它们来组合成一个完整的扇形。

代码示例：

**使用渐变：** 
.扇形 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

**使用伪元素：** 
.扇形 {
  width: 200px;
  height: 200px;
  position: relative;
}

.扇形::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  transform: rotate(45deg);
}

.扇形::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: green;
  transform: rotate(-45deg);
}