Search code examples
htmlcsspseudo-elementcss-shapes

Adding box-shadow to a :after pseudo element

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:

enter image description here

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:

enter image description here

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>

Solution

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