使用 CSS 创建一个三角形

假设我们有一个简单 ​​div​​ 标签：

<div class="triangle"></div>

有什么办法可以画出一个三角形？本文将介绍几种方法实现它。

使用 ​​border​​ 实现

使用盒模型的 ​​border​​ 边框即可快速创建一个三角形。

• 我们只需要使用其中的三个边框就可以创建一个三角形形状。
• 所有边框应具有相同的​​border-width​​。
• 三角形指向的另一侧（即，如果三角形指向下方，则为顶部）应具有所需的​​border-color​​​。相邻边框（即左侧和右侧）的​​border-color​​​ 应为​​transparent​​。
• 更改​​border-width​​ 值将更改三角形的比例。

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  /* 简写形式 */
  /* border: 20px solid transparent;
  border-top-color: 20px solid plum; */
}

使用 CSS ​​clip-path​​ 裁剪

​​clip-path​​ 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

我们可以使用它的 ​​polygon​​ 函数实现一个三角形：

.triangle {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 20px;
  width: 40px;
  background-color: plum;
}

使用 ​​linear-gradient​​ 实现三角形

​​linear-gradient()​​ 函数用于创建一个表示两种或多种颜色线性渐变的图片。

.triangle {
  width: 20px;
  height: 20px;
  background: linear-gradient(
    to bottom right,
    #fff 0%,
    #fff 50%,
    plum 50%,
    plum 100%
  );
}