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> 

Answer 1

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

Answer 2

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> 

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> 

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"/>