无法删除重叠的盒子阴影

Question

更具体地说，我使用的是聚合物纸影。

我正在尝试删除 paper-shadow 框的两侧以创建一个简单的箭头框，但我似乎无法摆脱它。我试过删除position: absolute，但这似乎并没有消除重叠行为。

这是我的 html/css 的样子：

HTML：

  <div class="content-container">
    <paper-shadow z="1">
      <div class="content">
        <h1>{{heading}}</h1>
        <content></content>
      </div>
      <paper-shadow class="triangle" z="1"> </paper-shadow>
    </paper-shadow>
  </div>

CSS：

.content-container
  flex: 3 0 45%
  order: 1
  position: relative

  .content, .triangle
    background-color: #fafafa

  .content
    padding: 20px

  .triangle
    position: absolute
    height: 20px
    width: 20px
    top: 50%
    left: 100%
    transform: translate(-50%, -50%) rotate(-45deg)

box-shadow 来自paper-shadow：https://www.polymer-project.org/docs/elements/paper-elements.html#paper-shadow

Answer 1

您尝试做的事情无法使用 CSS 完成，或者至少不能以您认为可以完成的方式完成。如果您有两个带有 box-shadow 重叠的元素，那么其中一个元素需要在另一个之上（z-index），并且您无法从比方说 - 一半元素中删除重叠部分。

但是，有一种“hacky”方法可以做到这一点，即按原样渲染盒子阴影，然后用一个简单的矩形覆盖它以覆盖重叠的阴影。伪类最好这样做，但只有当您使用的两个元素的背景颜色相同并且您需要在元素中有足够的填充以使这个人造矩形不会与您的内容重叠时，它才有效。

jsFiddle

示例 HTML：

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

还有 CSS：

.box {
    background:white;
    width:200px;
    height:100px;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
    position:relative;
    padding:25px;
}
.triangle {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: white;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
}
.box:after {
    position:absolute;
    content:'';
    background: white;
    height:40px;
    width:25px;
    right:0;
    top:50%;
    margin-top:-20px;
}

Answer 2

或者你也可以只使用pseudo元素before和after作为三角形和阴影使用:before添加三角形和:after添加shadow

body {
  background-color: #eee;
  padding: 20px;
}
.box {
  background: white;
  width: 200px;
  height: 100px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
  position: relative;
  padding: 25px;
}
.box:after {
  content: '';
  position: absolute;
  height: 31px;
  width: 31px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);
  z-index: -1;
}
.box:before {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: white;
  border-width: 30px 30px 0px 0px;
  border-color: transparent white;
  border-style: solid;
}

<div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat pellentesque placerat.</div>