css三角形的一边投影怎么写

CSS三角形是在网页设计中常用的元素，为了使其更加立体有深度感，我们可以在其中加入一些投影效果。其中，一边投影可以让三角形看起来更加锐利。下面就来介绍一下如何实现CSS三角形的一边投影。

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #fff;
  position: relative;
}

.arrow::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
  z-index: -1;
} 

以上代码中，使用了伪元素before来实现三角形的投影。在箭头元素的CSS样式中，border-width设置为20px 0 20px 20px，则可以实现一个左侧短边的三角形。

在伪元素的样式中，利用border属性的特性，设置top和right的值让其与原元素相重合。同时，设置z-index为-1，让其处于箭头元素的下层。border-color设置为rgba(0, 0, 0, 0.3)，即半透明的黑色，用于实现投影效果。

通过这样简单的CSS样式添加，就可以让三角形一个侧面呈现出立体感和深度。如果你想要实现右侧增加投影效果，可以将伪元素的right属性改为left，border-width属性的最后一个值改为0。