Cannot remove overlapping box-shadow

Question

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.

overlap not working

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

You haven't shown your box-shadow code. Beware of making up your own HTML elements, too. Not recommended, and not well supported. You could lower the z-index on the small square to hid half of it. — ralph.m, Dec 28 '14 at 08:19
Sorry. Forgot to mention, the `box-shadow` comes from `shadow-paper`. And tried that, but it did not work. — randomafk, Dec 28 '14 at 08:32
A few days ago there was a similar question, and I thought my answer might be of use to you ;) http://stackoverflow.com/questions/27607200/highlighting-a-tag-using-css/27607539#27607539 — Terry, Dec 28 '14 at 11:25

score 4 · Accepted Answer · answered Dec 28 '14 at 09:09

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

Cool, that worked :) Any idea why changing the `z-index` of `.content` didn't fix it? (`.content` and `.triangle` were sibling nodes that overlapped). — randomafk, Dec 28 '14 at 17:26
They both had shadow, so by changing z-index you could only decide which element overlaped witch, but regardless of that it was still not what you vere looking for. Take a look at both possibilites here: http://postimg.org/image/9pusu1hfb/ and here: http://postimg.org/image/yp1jeda9b/ — bwitkowicz, Dec 28 '14 at 18:34
Oops, apologies for the bad naming :). I should clarify: The DOM was that `.content-container` contained both `.content` and `.triangle` as direct children. But only `.triangle` (and `.content-container`) had box-shadows. My original strategy to increase the `z-index` of `.content` so that it would cover up the left side of `.triangle`, but that didn't do anything. But changing the `z-index` of `.content-container`, like you suggested, would change how the overlap works. — randomafk, Dec 28 '14 at 20:30

score 2 · Answer 2 · answered Dec 28 '14 at 11:20

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>

This is a very nice solution indeed, but since we are using both `after` and `before` for one arrow (right) going this way it would not be possible to add another arrow (left) to the box at the same time if that was needed. But if author only needs one arrow than this is the way to go. — bwitkowicz, Dec 28 '14 at 11:59

Cannot remove overlapping box-shadow

2 Answers2

Linked