css3 画三角形加阴影

三角形实现原理：

通过控制四周边框实现,想要红色区域三角形的就设置其他三边颜色设置为transparent,想要什么什么三角形就其他边设置为透明颜色即可

宽度width为0；height为0；

（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。

（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

具体实现：

1、向上

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

2、向下

 

 

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid red;
}

3、向左

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid red;
    border-bottom: 50px solid transparent;
}

4、向右

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid red;
    border-bottom: 50px solid transparent;
}

 加阴影呢

因为三角形视觉看上去是三角形,但其实是矩形,直接给加box-shadow实现不了三角形的,

解决办法:加一个伪类,设置他的颜色为阴影的颜色,然后利用定位差覆盖实现阴影效果

.content-box::before {
  content: '';
  position: absolute;
  z-index: 99;
  right: -9px;
  bottom: 20px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f6f6f6;
}
.content-box::after {
  content: '';
  position: absolute;
  right: -12px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid rgb(0, 0, 0, 0.02);
}

实现效果：