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

Issues with the Dropdown Menu

I'm currently working on a dropdown menu and I've encountered two issues. When I hover over the links in the main navigation bar (such as 'about' and 'connect'), only the actual words are clickable, not the entire area tha ...

htmlcssdrop-down-menu

Place form at the center of the Bootstrap Modal

My question is, how can I center the entire form, including the input fields and labels, within the modal? Here is also a helpful Fiddle: http://example.com, although the snippet provided should work as well. <script src="https://example.com/bootstr ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a scrollable panel using CSS is easy with a solid border and a panel element

Using Vaadin to design my front-end, I encountered an issue where adding border-style:solid to the style.css file resulted in a scrollable v-panel. How can I retain the solid style while removing the scrolling feature? Please refer to the screenshot for cl ...

cssformborderstyle

What is the best way to generate a personalized error message when an HTML5 required input pattern fails to meet the criteria?

I am facing an issue with the following code snippet: <input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" /> After entering just one character, I receive a message that says: " ...

html

Using a nested loop in Javascript to fetch JSON data

My goal is to display Categories and their corresponding subcategories in a specific order. However, my current method of using loops within loops is not producing the desired outcome: Category(Mobile) Category(Laptop) Subcategory(Iphone4) Subcategory(Iph ...

javascripthtmljsonloops

Modify the alignment and orientation of the data within RadHtmlChart

I have a chart: <telerik:RadHtmlChart ID="chrtInvestmentAmount" runat="server" Transitions="true" DataSourceID="SqlDataSource1" Height="256px" Skin="Glow" Width="1024px" RenderMode="Auto"> <PlotArea> <Series> ...

htmlasp.nettelerik

Showcasing an image stored in an HTML file on a Vue.js webpage

I'm currently facing an issue with displaying a local image saved in an HTML file on my Vue.js page. I attempted to store the content of the HTML file into a variable using the code below: computed: { compiledHtml: function() { return this.a ...

javascriptpythonhtmlvue.js

Creating a dynamic image carousel using jQuery

Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running whe ...

javascriptjqueryhtmlcss

Transforming a Bootstrap Background Image to a Captivating Video Display

Here is the CSS code snippet that I'm having trouble with: .masthead { position: relative; width: 100%; height: auto; min-height: 35rem; padding: 15rem 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75% ...

htmlcssvideobackground

Angular Material Rotate Ink Bar to Vertical Orientation

After wanting to change the orientation of Angular Material's Tab Component to vertical, I visited this page (Tabs) and experimented with the CSS. By making the necessary adjustments, I successfully displayed the tabs vertically using the following CS ...

cssangularangular-materialmaterial-design

The initial item in the Materializecss slider is failing to display

Currently, I am attempting to implement materialize slider with skrollr. The setup is functional; however, only the first item of the slider is set to opacity: 0 initially. https://i.stack.imgur.com/urSww.jpg After a brief delay, the second item becomes ...

jquerycssslidermaterialize

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Does anyone have suggestions on how to animate elements when filtered by JavaScript? The code I've tried so far doesn't seem to be working. Here's what I currently have: http://jsfiddle.net/ejkim2000/J7TF4/ $("#ourHolder").css("animation", ...

javascriptcsssortinganimationfiltering

Creating an arrow dialog box in Material UI: A step-by-step guide

I have successfully created an arrow box (div) using custom CSS and HTML. However, I am facing difficulty in implementing the same design in Material UI with React JS. The code below demonstrates how to achieve this using custom CSS. My question is: How ...

htmlcssreactjsmaterial-ui

Tips for applying personalized CSS to individual Toast notifications in Angular

MY QUESTION : I am looking to customize the CSS of a single toast used in Angular components. While there may be multiple toasts, I specifically want to style one particular toast differently. For example, the toast image can be viewed here: example toast ...

cssangulartypescripttoasttoastr

The hover effect seems to be disabled in the third-level submenu

I need help creating a dropdown menu that shows an image when hovering over a specific item. I have checked my CSS code and HTML structure, but the image is not appearing as expected when I hover over the "Afyon White" list item. Any ideas on how to fix th ...

htmlcssdrop-down-menuhoverdropdown

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

Develop a website using HTML and CSS for the front-end design, complemented by Java for the

I find myself at a standstill with a project I want to tackle, but unfortunately, my knowledge of modern web development, particularly full stack, is minimal. As a result, I am completely clueless on how to proceed. Here is what I am familiar with and what ...

javahtmlcssweb-deploymentminecraft

Using BeautifulSoup4 in Python to extract text data from a nested tag within an h1 element

Seeking assistance in extracting the text content within an anchor tag that is nested inside a heading tag. <h1 class="branded-page-header-title"> <span class="qualified-channel-title ellipsized"><span class="qualified-channel-title-w ...

htmlpython-3.xtagsbeautifulsoupweb-crawler

Utilizing CSS for fixed positioning and media queries

I'm currently facing an issue with media queries and a sidebar div that has a fixed position. The problem arises when the viewport becomes too narrow, causing the main content to shift to the left and end up below the sidebar. I attempted to resolve t ...

cssstaticpositionmedia-queriesfixed

What steps should I take to confirm the text exists within a particular <DIV> element using Selenium WebDriver (java) and Chrome?

Background: My current setup involves using Selenium WebDriver with Java and utilizing Google Chrome as the browser. I have a question regarding locating specific text on a webpage. What if there are multiple instances of the same text that I am looking f ...

javahtmlseleniumxpathselenium-webdriver