css三角形 before

CSS中，我们可以使用:before伪元素来实现三角形的效果。:before是CSS中的一个伪元素，可以在元素的内容前添加一个内容。下面我们来看看具体的实现方法。

.triangle{
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #007bff transparent;
}

.triangle:before{
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #007bff transparent;
} 

上述代码中，我们首先给三角形元素.triangle设置position:relative，宽高都为0，同时设置了四条边的样式为solid，则三角形的底边为0，上边为50px。再设置了底边的颜色为transparent，上边的颜色为#007bff，则三角形的颜色为#007bff。

接着，我们使用:before伪元素来为三角形添加一个上三角形，因此设置:before伪元素的位置为absolute，top为-50px，left为0。内容设置为空，四条边的样式和颜色与三角形元素一致。这样，我们就成功地实现了一个带上三角的三角形元素。