<div class="triangle--problem">This is what happens when you add a box-shadow to a CSS3 triangle</div>

<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>
$green: #BADA55;
$green--light: lighten($green, 15%);

body {
  background-color: $green;
}

.triangle {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  
  background: $green--light;
  
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
  
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    bottom: -2em;
    left: 50%;
    box-sizing: border-box;
    
    border: 1em solid black;
    border-color: transparent transparent $green--light $green--light;
    
    transform-origin: 0 0;
    transform: rotate(-45deg);
    
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
  }
}

.triangle--problem {
  position: relative;
  margin: 5em;
  padding: 1em;
  box-sizing: border-box;
  
  background: $green--light;
  
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
  
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.75em;
    bottom: -3em;
    left: 50%;
    box-sizing: border-box;
    
    border: 1.5em solid black;
    border-color: $green--light transparent transparent transparent;
    
    box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js