css三角形设置阴影

CSS三角形可以使用伪元素来实现，在前面的文章中我们已经讲过如何用CSS代码来实现三角形。不过有时候我们还需要在三角形上添加阴影，这个该怎么做呢？

.triangle{
  position: relative;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #007bff;
  border-bottom: 50px solid transparent;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
} 

上面的代码实现了一个蓝色的三角形，并且在三角形上方添加了一个阴影。我们可以看到，阴影是在整个三角形上面的，这并不是我们想要的效果。下面我们来看看如何实现我们想要的效果。

.triangle{
  position: relative;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #007bff;
  border-bottom: 50px solid transparent;
}
.triangle:before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid rgba(0,0,0,0.3);
  border-bottom: 50px solid transparent;
  transform: translate(3px, 3px);
  z-index: -1;
} 

上面的代码实现了一个带有阴影的三角形。在这个代码中，我们使用了伪元素:before来实现阴影效果。在伪元素中，我们为三角形设置了一个黑色透明度为0.3的边框，并将其放置在三角形下方，然后使用transform来将其向右下方偏移3px。这样就实现了一个看起来像是阴影的效果，而且它只会在三角形的下面显示。