公司项目中遇到一个需求,需要给一个三角形加上阴影效果,本来自己的思路是这样的:

<div id="demo"></div>
#demo {
  width: 0;
  height: 0;
  border-width: 25px 10px;
  border-style: solid;
  border-color: yellow yellow transparent transparent;
  box-shadow: 3px -3px 5px 0  #d8d8d8;
}

效果如图

blob.png

该方案有个缺陷,无法给斜边加上阴影,怎么办?

我立马想到的是用伪类,保留一条边的阴影,然后旋转,使之跟父元素的斜边重合,

#demo {
  width: 0;
  height: 0;
  border-width: 20px 15px;
  border-style: solid;
  border-color: yellow yellow transparent transparent;
  box-shadow: 3px -3px 5px 0  #d8d8d8;
  position:relative;
}
#demo::after{
    width: 50px;
    height: 50px;
    box-shadow: -4px 0px 3px -2px #d8d8d8;
    content:' ';
    position:absolute;
    left:-14px;
    top:-20px;
    transform:rotate(-37deg);
    transform-origin:left top;
}

效果如图

blob.png

当然了,如果想实现三条边都有阴影效果,还有一种方法,就是用两个三角形叠加,里层加上滤镜模糊效果,

<div class="triangle">
  <div class="front"></div>
  <div class="back"></div>
</div>
.triangle .back{
  border-width:50px 50px;
  border-color:#ccc #ccc transparent transparent;
  border-style:solid;
  height:0;
  width:0;
  -webkit-filter: blur(5px);
  //position: relative;
}
.triangle::after{
  display: block;
  border-width:50px 50px;
  border-color:red red transparent transparent;
  border-style:solid;
  height:0;
  width:0;
  content:' ';
  position: absolute;
  left:5px;
  top:5px;
}

效果如下:

blob.png

相比较后面两种方法,第二种方法,太过于繁琐,第三种比较直观简洁