css三角形并加阴影

CSS 三角形一般都是通过伪元素来实现的。首先，我们需要一个有宽度和高度的元素，然后我们使用伪元素来创建一个等边直角三角形。下面是一个创建 CSS 三角形的代码：

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

.triangle::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -51px;
  left: -50px;
}

.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent #555 transparent;
  position: absolute;
  top: 0;
  left: -51px;
  z-index: -1;
  Box-shadow: 3px 3px 5px #888888;
}

上面代码中，我们首先创建了一个宽度和高度都为 0 的元素，并使用实线边框来创建一个等边三角形，下方的边使用了灰色背景。然后，我们使用伪元素来创建一个更小的等边三角形，并用白色背景来覆盖原来的灰色背景，形成倒影的效果。此时，我们通过 z-index 属性将伪元素移动到底层，让它在原三角形的下方，形成阴影的效果。

接下来，我们给伪元素添加了一个 3px x 3px 的阴影，使得整个三角形看起来更加立体化。