css3形状三角形伪类

CSS3中的形状模块都是为了实现基础形状而设计的，三角形伪类便是其中之一，它可以在不使用图像的前提下，用CSS来创建三角形。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #f00;
}

上面的代码就是一个创建红色三角形的例子，它主要的实现方式是利用了CSS3中的border属性。border是由四部分组成的，分别是border-width、border-style、border-color、border-image，而上面代码中的边框属性就只设置了三个方向上的边框，border-top、border-bottom、border-left。通过设置不同的border值，就能创建出不同方向的三角形。

对于CSS3形状模块，伪类的应用也很常见。如在创建三角形时使用的类调用就属于伪类的一种，它可以让我们在不侵入HTML结构的情况下，方便地实现样式的控制。

.triangle:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #f00;
}

上面的代码使用了:before伪类，它表示在目标元素的前面插入该样式。其中，content属性是为了在:before伪类中使用border属性而设置的，而display:inline-block的作用是让伪类元素内联显示，否则在文档流中不会占据空间。使用伪类不仅可以实现简单的样式，还可以结合其他CSS功能让样式更加丰富。

利用CSS3形状模块可以实现丰富形状的样式，而其中的三角形伪类则是最为基础的，尤其是在响应式设计中，它可以实现各种样式的弹性设计，让样式更符合用户体验。