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

<强> to_wave

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

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

我使用了 perspective ， rotateX 和 transform-origin 来创建“一边倾斜“元素。如果您有更好的解决方案，请自由填写进行自己的调整。

希望它对你有用，对我的英语感到抱歉。

巴西最诚挚的问候。

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

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支持下实现三角形周围的阴影？

3 个答案: