如何在 IE9 支持下实现三角形周围的阴影？答案

【问题标题】：How to implement shadow around triangle with IE9 support?如何在 IE9 支持下实现三角形周围的阴影？
【发布时间】：2017-05-01 04:22:31
【问题描述】：

我必须做一个这样的块。

有没有办法在没有阴影重叠的情况下为块应用 box-shadow？

这是我最好的结果 - http://codepen.io/To_wave/pen/zwwqRd

<div class="box">
    <div class="triangle"></div>
</div>

body {
  background: #F8F8F8;
  padding: 50px;
}

.box {
  height: 150px;
  background: #FFF;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(62, 62, 62, 0.2);
}

.triangle {
  width: 14px;
  height: 26px;
  position: absolute;
  left: -13px;
  bottom: -4px;
  overflow: hidden;
}

.triangle:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 30px;
  background: #fff;
  transform: skew(-26deg);
  bottom: 4px;
  left: 10px;
  box-shadow: 0px 2px 4px 0px rgba(62, 62, 62, 0.2);
}

【问题讨论】：

标签： html css internet-explorer-9

【解决方案1】：

to_wave。

我只使用一个 div 和三角形上的不同概念来创建这个气泡框，以避免这个阴影框问题。它不是完美的解决方案，但它有效：https://jsfiddle.net/DiogoBernardelli/028wqpee/1/

我所做的是用width: calc(100% + 7px) 创建这个m-bubble::before（计算是因为left:-7px 定位），并添加一个bottom:-3px。这样一来，该元素将填满气泡的整个底部，您将避免阴影重叠。

我使用 perspective、rotateX 和 transform-origin 来创建这个“一侧倾斜”的元素。如果您有更好的解决方案，请随意填写以进行自己的调整。

希望它对你有用，对不起我的英语。

来自巴西的问候。

【讨论】：

这种方法在缩放盒子上有问题；我改进了我最初的想法。它看起来很复杂，但可以codepen.io/To_wave/pen/wddZxX
您的解决方案有所改进，我同意。您现在可以删除“气泡”div。祝贺结果。

【解决方案2】：

使用画布怎么样？

https://codepen.io/partypete25/pen/bWWLzN

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // begin custom shape
      context.beginPath();
      context.moveTo(20,20);
      context.lineTo(500,20);
      context.lineTo(500,300);
      context.lineTo(10,300);
      context.lineTo(20,280);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;

      context.shadowBlur=10;
      context.shadowColor="black";

      context.fillStyle = '#fff';
      context.fill();
  </script>

【讨论】：

【解决方案3】：

我改进了我最初的想法。它看起来很复杂，但可以codepen.io

<div class="wrapper">
  <div class="container">
    <div class="box">

    </div>
  </div>
</div>


body {
  background-color: #F8F8F8;
}

.wrapper {
  position: relative;
  padding-right: 2px;
}

.wrapper::after {
  content: '';
  position: absolute;
  display: block;
  right: 2px;
  top: 0;
  width: 0;
  height: calc(100% - 5px);
  box-shadow: 0 2px 4px 1px rgba(62, 62, 62, .2);
  z-index: -1;
}

.container {
  padding: 1px 0 8px 30px;
  position: relative;
  overflow: hidden;
}

.box {
  position: relative;
  background: #FFFFFF;
  height: 120px;
  box-shadow: 0 2px 4px 0 rgba(62, 62, 62, .2);
}

.box::after {
  content: '';
  display: block;
  position: absolute;
  background-color: #FFFFFF;
  height: 26px;
  width: calc(100% + 12px);
  left: -6px;
  bottom: -5px;
  transform: skewX(-26deg);
  box-shadow: -1px 3px 4px -2px rgba(62, 62, 62, .2)
}

【讨论】：