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

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

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