Adding box-shadow to a :after pseudo element

Question

I have a div called .testimonial-inner and using the :after pseudo element I have an arrow that sits underneath it pointing down. The problem I'm having is adding a box-shadow to it all so they both look like one natural element.

Without box-shadow on the triangle:

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 18px;
  margin-left: -18px;
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
</div>

Notice the box shadow currently doesn't wrap around the arrow.

When I add it to the :after declaration I get the following result:

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 18px;
  margin-left: -18px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
</div>

Tao

See this demo: codepen.io/ryanmcnz/pen/JDLhu – Synergistic

As a suggestion, next time you can use this little tool for doing that: ilikepixels.co.uk/drop/bubbler – Alaric

Answer 1

You could add another :pseudo-element, rotate it by 45deg and add box-shadow to it.

Updated Fiddle

body {
  background: #eee
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.testimonial-inner:after {
  top: 100%;
  left: 48px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 18px;
  margin-left: -18px;
}
.testimonial-inner:before {
  content: '';
  position: absolute;
  transform: rotate(45deg);
  width: 36px;
  height: 36px;
  bottom: -12px;
  z-index: -1;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
</div>

---

Another approach using svg as a triangle.

body {
  background: #eee
}
.testimonial-wrap {
  position: relative;
}
.testimonial-inner {
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 30px;
  display: block;
  margin-bottom: 25px;
  position: relative;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
#triangle {
  position: absolute;
  top: 100%;
  margin-top: -1px;
  left: 50px;
}

<div class="c-4 testimonial-wrap">
  <div class="testimonial-inner">
    <p>Using Facebook was unquestionably the best decision I could possibly have made at the point in my journalistic journey. It enabled me to share my fears, frustrations as well as successes.</p>
  </div>
  <svg id="triangle" width="40" height="26">
    <defs>
      <filter id="f" width="150%" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" />
        <feComponentTransfer>
          <feFuncA type="linear" slope="0.8" />
        </feComponentTransfer>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <path filter="url(#f)" d="M0,0 h40 l-20,20z" fill="white" />
  </svg>
</div>

Lashonlashond

Great detailed response! Accepted! Thanks. – Tao

I don't have a solution for the following scenario myself, but I still want to mention it: So, as far as I haved tested both approaches have a little drawback when the main element does want to use an rgba background with an alpha less than 1. In this probably rather "demanding" case either the pseudo-elements drop-shadow shines through the main containers background (approach 01) or the main containers box shadow shines through the svgs background (approach 02). – Speaking

Answer 2

A filter will work:

.shadowed {
    -webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1));
    filter        : drop-shadow(0px 2px 2px rgba(130,130,130,1));
    -ms-filter    : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
    filter        : "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')";
}

Working Example : http://codepen.io/tolmark12/pen/JopNeR?editors=110

Learn more at : Creating a true cross browser drop shadow

Leckie

Great article! This is pretty slick when using box shadow on a parent element with children that are pseudo elements! – Macdonald

Great solution and thanx for the new knowledge! – Antidepressant

Nice! Didn't know this existed -very helpful! – Benzene

It's a bit nitpicking, but as far as I have tried / do know this approach might have one minor drawback: When the html-container in questions does have a rgba-background with an alpha less than 1 the filter shines through the container's background. – Speaking

Answer 3

IMHO, I think it's a bit hackish, but is using pure css to do this:

div{
  height:200px;
  width:100%;
  border-radius:10px;
  background:gray; 
  position:relative;
  box-shadow:0 0px 10px black;
  border:1px solid black;
}


div:before{
  position:absolute;
  bottom:-10px;
  left:40px;
  content:"";
  background:gray;
  height:20px;
  width:20px;
  transform: rotate(45deg);
  border-bottom:1px solid black;
  border-right:1px solid black;
  
  box-shadow:0 0px 10px black;
  }

div:after{
  position:absolute;
  bottom:0px;
  left:30px;
  content:"";
  background:gray;
  height:20px;
  width:40px;

  }

<div>test</div>

Ecumenicity

Answer 4

You can't do what you want to do here using box-shadow. This is because the "arrow" effect is created by using a transparent color everywhere except the top. This means that the element is still a square and your shadow will render around it accordingly.

If you want to add a shadow to the shape of the image, try using an SVG, or just an image with a pre-rendered shadow.

<polygon points="220, 150 350, 220" style="fill:#FFFFFF; stroke:#000000;stroke-width:1"/>

Macronucleus

Answer 5

       body {
      padding: 90px;
      background: #eee;
     }
     
    .container {
      filter: drop-shadow(0px 1.5px 10px rgba(0, 0, 0, 0.2));
    }
    
    .hero {
      position: absolute;
      background-color: #fff;
      right: 24px;
        bottom: 100%;
        width: 200px;
        margin-bottom: 10px;
        padding: 30px 15px;
      border-radius:16px;
    }
    
    .hero:after {
      content: '';
      position: absolute;
      top: 100%;
      right: 24px;
      margin-left: -5px;
      border-width: 10px;
      border-style: solid;
     border-color: #fff transparent transparent;
    }

<div class="container">
<div class="hero">Drop Shadow</div>
</div>

Zelaya