有阴影的三角形

发表于

普通的三角形在CSS中可通过指定上下左右四个方向的border来实现。
如下面的代码可以声明出一个宽12px、高6px的倒立的等腰三角形。

1
2
3
border-top: solid 6px #fff;
border-left: solid 6px transparent;
border-right: solid 6px transparent;

但想要这个三角形有阴影，直接声明box-shadow是没用的，因为这个声明是对整个盒子模型生效的，这样声明出来的三角形会在四周有一个“很方”的阴影。

这个问题可以通过再声明一个伪元素，让这个伪元素高度或宽度足够小，所有的阴影效果声明在这个伪元素上。然后让三角形覆盖在上面，这样就可以trick出一个有阴影的三角形了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// less中声明一个带三角和阴影的消息对话框
.message-box {
  width: 300px;
  height: 200px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  &.top {
    &::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      margin-left: -10px;
      border-top: solid 6px #fff;
      border-left: solid 6px transparent;
      border-right: solid 6px transparent;
    }
    &::before {
      content: '';
      width: 12px;
      height: 3px;
      background-color: transparent;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -10px;
      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .2);
    }
  }
}

示意图
然而这个方法的问题在于，在那个为三角形贡献阴影的伪元素的box-shaow的偏移量和模糊半径如何取值，只能根据视觉效果慢慢调了。只要有点耐心，这个box-shaow会跟外面的box-shaow和谐相处的。