How to enhance the design with a box-shadow for a :after pseudo element

One of the challenges I'm facing involves a CSS design with a div called .testimonial-inner that has an arrow created using the :after pseudo element. The issue is making them appear as one cohesive element, especially when applying a box-shadow.

Here is the code 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>

As you can see, the box shadow does not encompass the arrow.

When I try to add it to the :after declaration, the result is as follows:

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>
htmlcsspseudo-elementcss-shapes

Answer №1

Implementing a filter:

.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')";
}

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

For more insights: Creating a true cross browser drop shadow

Answer №2

For a unique touch, consider adding another :pseudo-element, rotating it by 45deg, and including a box-shadow.

Check out the updated Fiddle 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;
  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 that point in my journalistic journey. It allowed me to share my fears, frustrations, as well as successes.</p>
  </div>
</div>

Another interesting technique involves utilizing an svg to create a triangle shape.

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 this stage 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

Personally, I find it slightly unconventional, but using only CSS to achieve this effect:

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

It's not feasible to achieve the desired effect with box-shadow in this scenario. The "arrow" illusion is generated by applying a transparent color to all sides except the top, resulting in a square element that will have the shadow rendered around it proportionately.

If you aim to include a shadow following the image shape, consider utilizing an SVG or simply use an image with a pre-existing shadow.

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connecting your HTML file to a CSS stylesheet

I'm struggling to connect my "index.html" file with my "stylesheet.css" file. I've tried copying the code from resources like CodeAcademy and w3schools, but nothing seems to be working. I'm currently using Notepad++ as my text editor - could ...

htmlcss

Tips for verifying that input is provided in a text field when the checkbox is marked

Can someone help me with validating a form where the user must enter data in a text field if they check a checkbox? I have JavaScript code for checkbox validation, but need assistance with text field validation. Thank you! $(document).ready(function () ...

javascriptjqueryhtml

Tips for scaling and compressing a canvas image using only pure javascript and HTML5 techniques

I am currently working on resizing and rotating a camera picture on the client side without using any special libraries. I have successfully completed most of the task, but I encounter an offset of 320 pixels when rotating the image. The source of this off ...

javascripthtmlcanvas

Synchronized scrolling and equal height for multiple divs

Looking to create a system similar to GitHub's conflict resolver for my project. I have multiple versions represented by values in columns, and I want to be able to select different values from each column to create a new solution. It's important ...

javascripthtmlcssangular

Using flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

htmlcssflexbox

Develop content specific to different geographic locations for a web application using PHP

I have been working on a PHP-based online shopping website but have not had much success with it. example.com After trying multiple approaches without success, I have decided to implement an admin feature for adding locations. For instance, if I add "Mad ...

phphtmlmysqlurl

Modifying the color of specific sections of SVG elements

Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...

javascripthtmlcssd3.jssvg

Tips for maintaining row position while zooming your browser above 100% with Bootstrap

I am experiencing a small issue with the bootstrap grid system. I have set up a row with two sections using col-md-6. However, when I zoom in my browser to over 100%, the Close label and input move to the next line. I want them to stay in the same place re ...

htmltwitter-bootstrap

Are Your Padding Styles Missing?

I've noticed that the text under the photos on this page in the main section (a.event) is not displaying the 5px padding top and bottom. Any suggestions for fixing this? Thank you! =) a.event { width:315px; height:auto; border:0; padding: 5px 0; } ...

csswordpresspadding

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

For a while, I have been using the bootstrap dropdown code as a template and it was working perfectly fine. However, after ensuring everything is up to date, all my dropdowns have suddenly stopped working. Even when I tried pasting the bootstrap code dire ...

htmlcssbootstrap-4

Issue with CSS rendering in Internet Explorer

Although my website appears perfectly in Firefox, the entire style sheet doesn't seem to load properly in IE 7. It's only displaying certain styles. Any assistance on this issue would be greatly appreciated! ...

htmlcss

Creating a visually appealing website with Bootstrap 3

Looking to create a unique HTML design using Bootstrap. So far, this is what I've come up with: Plunker Any suggestions or assistance would be greatly appreciated. ...

htmlcsslayouttwitter-bootstrap-3

Issues with Curved Corner Touchdown Feature

Having trouble with getting the round css to work properly in the below code It seems to be only applying the background color, but not the border styling The border code is on the same line as the round css: style=" border : 1px solid #D6D6D6; and t ...

htmlcss

Managing multiple carousels simultaneously using the middle mouse button in Swiper.js

I am currently utilizing 5 carousels on my screen, all of which are operated by the same navigation buttons. In addition to this, I require the ability to control them using the middle mouse scroll. However, when I activate the mouse wheel control, only ...

javascriptcsscarouselswiper.js

How to Use Jquery to Delete a Specific String

I've been attempting to remove certain strings from a string using Jquery, however it seems like the code isn't working and my variable remains unchanged. var classes = $("body").attr('class'); alert('.side-nav' + classes); c ...

javascriptjqueryhtmlcss

Function for editing a button in an AngularJS single page application

I am a beginner in AngularJS and I'm currently working on a project to create a single page application for tracking expenses. However, I'm facing some challenges with my code. Although I have successfully implemented most of the functions, I am ...

javascripthtmlangularjs

Tips for creating a responsive ReactJS website with Material-UI

I've been working on a reactjs project with material-ui, and everything looks great on desktop. However, when I switch to the mobile layout, all the text and images start overlapping. I'm wondering how I can make my site responsive. Below you&apo ...

cssreactjsflexboxmaterial-uigrid-layout

I'm having trouble rendering the div using PHP code within an AJAX request in CodeIgniter

I am a beginner in AJAX and I'm attempting to display specific restaurant data based on the selected area from a dropdown using AJAX. However, I am facing issues with displaying the restaurant view correctly. Can someone please guide me on how to proc ...

phpjqueryhtmlajaxcodeigniter

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js

Implementing CSS injection on a Next.js page during server-side rendering - tips and tricks!

I recently started working with next js. In my _app.tsx page, I have the following code: import '../styles/antd.css' import '../styles/globals.css' import type { AppProps } from 'next/app' function MyApp({ Component, pagePr ...

cssnext.jsserver-side-rendering