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

Question

我必须做一个这样的块。

有没有办法在阴影不重叠的情况下为块应用框阴影？

这是我最好的结果 - 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);
}

Answer 1

使用 canvas 怎么样？

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>

Answer 2

to_wave.

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

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

我用了perspective、rotateX和transform-origin 来创建这个 "one side skewed" 元素。如果您有更好的解决方案，请随意进行调整。

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

来自巴西的问候。

Answer 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)
}

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

How to implement shadow around triangle with IE9 support?

html

css

internet-explorer-9