css三角形after

CSS 三角形是许多 Web 设计师喜欢使用的一个效果，而在其中，众所周知的是 :after 伪元素的使用。在这篇文章中，我们将要学习如何使用 :after 创建 CSS 三角形。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
} 

上面的代码将创建一个红色的等边三角形，其宽度、高度均为 0。这是因为这个三角形只是由三个边框组成，并没有实际的不透明内容。我们可以使用任意颜色的边框来创建相应的三角形。

接下来，让我们来看一个使用 after 伪元素来创建 CSS 三角形的例子。

.triangle-after {
  position: relative;
}
.triangle-after:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid blue;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  position: absolute;
  bottom: -50px;
  left: 0;
} 

如上所述，我们首先定义了 :after 伪元素的样式，然后通过将它的 position 属性设置为 absolute，并使用 bottom 和 left 属性将它调整到正确的位置。这里的 bottom 值列举一下其计算方式：如果三角形的高度是 50px，那么 bottom 取值为 -50px 将使三角形上沿对齐父元素的下沿，而且由于 after 元素是放在父元素内部的，因此可以避免了使用负 top 值的情况。

总的来说，使用 CSS 三角形可以为网页添加一些视觉效果，并且可以在很大程度上减少所需的 SVG 或 PNG 图片数量。