Skip to content

Latest commit

 

History

History
65 lines (50 loc) · 1.72 KB

使用 CSS 创建一个三角形.md

File metadata and controls

65 lines (50 loc) · 1.72 KB

使用 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%
  );
}