Cannot remove overlapping box-shadow

问题

More specifically, i'm using polymer paper-shadow.

I'm trying to remove two sides of a paper-shadow box to create a simple arrow box, but I can't seem to get rid of it. I've tried removing the position: absolute, but that doesn't seem to get rid of the overlapping behavior.

Here's what my html/css look like:

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)

The box-shadow comes from paper-shadow: https://www.polymer-project.org/docs/elements/paper-elements.html#paper-shadow

回答1:

What you are trying to do cannot be done using CSS, or at least not in the way you think it can be done. If you have two elements with box-shadow overlapping than one of them needs to be above the other (z-index) and there is no way you can remove overlapping partialy from let's say - half of an element.

However, there is a "hacky" way of doing this by rendering the box shadow as is and then covering it with a simple rectangle to cover an overlapping shadows. Pseudo classes are best to do that, but that only works if background color you are using is the same for both elements plus you need to have enaugh padding in your element so that this artificial rectangle doesn't overlap your content.

jsFiddle

Sample HTML:

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

And 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;
}

回答2:

or you can also use only pseudo element before and after for triangle and the shadow use :before for adding triangle and :after for adding 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>

来源：https://stackoverflow.com/questions/27674620/cannot-remove-overlapping-box-shadow

标签

html

css

polymer