Angular silhouette casting on CSS fold

I am attempting to recreate this design as accurately as possible, but I am struggling with replicating the shadow effect on the right side. Is it achievable using CSS?

CSS:

*{margin:0px;padding:0px;}

html {
    width:100%;
        height:100%;
      text-align: center;
    }

.bold {
    font-weight:700;
}

#ribbon {
        padding: .34em 1em;
        margin: 0;
        margin-top: 5%;
        position:relative;
        color: #000;
        text-align: center;
        letter-spacing:0.1em;
        padding-top:12px;
        padding-bottom:12px;
        display: inline-block;
        background: #ffd82b;
        z-index:100;
        box-shadow: 0 7px 0px -2px #ebeced;
    }

#ribbon:after {
        content: "";
        width:3.2em;
        bottom:-.5em;
        position:absolute;
        display:block;
        border: .9em solid #ffd82b;
        box-shadow: 0 7px 0px -2px #ebeced;
        z-index:-2;
    }

#ribbon:after {
        right: -4.3em;
        border-left-width: .75em;
        border-right-color:transparent;
    }

#content:after {
        content:"";
        bottom:-.5em;
        position:absolute;
        display:block;
        border-style:solid;
        border-color: #fc9f42 transparent transparent transparent;
        z-index:-1;
    }
#content:before {
    content:"";
        top:-.5em;
        transform: rotate(90deg);
        position:absolute;
        display:block;
        border-style:solid;
        border-color: #fc9f42 transparent transparent transparent;
        z-index:-1;
}

#content:before {
      left: 0;
      border-width: .5em 0 0 .5em;
    }

#content:after {
      right: 0;
      border-width: .5em .5em 0 0;
    }

HTML:

<div id="ribbon">
    <span id="content"><span class="bold">Special Offer:</span> Recieve bonus rewards points for signing up</span>
</div>

Alternatively, you can view a live demo of the code here: http://jsfiddle.net/k0a6jhv6/

htmlcsscss-shapes

Answer №1

To create an elegant ribbon design, you can utilize borders, z-index, and pseudo-elements instead of relying on box-shadows:

SEE DEMO

Here is the generated output:

.ribbon{
  font-size:20px;
  position:relative;
  display:inline-block;
  margin: 2em 1em;
  text-align:center;
}
.text{
  display:inline-block;
  padding:0.5em 1em;
  min-width:20em;
  line-height:1.2em;
  background: #FFD72A;
  position:relative;
}
.ribbon:after,.ribbon:before,
.text:before,.text:after,
.bold:before{
  content:'';
  position:absolute;
  border-style:solid;
}
.ribbon:before{
  top:0.3em; left:0.2em;
  width:100%; height:100%;
  border:none;
  background:#EBECED;
  z-index:-2;
}
.text:before{
  bottom:100%; left:0;
  border-width: .5em .7em 0 0;
  border-color: transparent #FC9544 transparent transparent;
}
.text:after{
  top:100%; right:0;
  border-width: .5em 2em 0 0;
  border-color: #FC9544 transparent transparent transparent;
}
.ribbon:after, .bold:before{
  top:0.5em;right:-2em;
  border-width: 1.1em 1em 1.1em 3em;
  border-color: #FECC30 transparent #FECC30 #FECC30;
  z-index:-1;
}
.bold:before{
  border-color: #EBECED transparent #EBECED #EBECED;
  top:0.7em;
  right:-2.3em;
}
<p class="ribbon">
  <span class="text"><strong class="bold">Special Offer:</strong> Receive bonus rewards points for signing up</span>
</p>

Answer №2

Have you considered adding a new element to generate the missing shadow effect?

#abc {
    display:inline-block;       
    border: .9em solid #ebeced;
    border-right-color:transparent;
    position:absolute;
    right:-73px;
    z-index:-3;
    bottom:-12px;
}

Check out this solution on jsfiddle for reference.

Alternatively, you can utilize span:after within #content for another approach:

#content span:after {
    content:'';
    display:block;      
    border: .9em solid #ebeced;
    border-right-color:transparent;
    position:absolute;
    right:-73px;
    z-index:-3;
    bottom:-12px;
}

View this updated solution on jsfiddle here.

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

Design your website with CSS by incorporating hanging ::before labels that feature unique formatting

I am looking to create labels that designate specific groups of words. Here are the criteria: The label should appear to the left of the word group The words should be enclosed in lines, while the label should not The words should be indented, while the ...

css

What is the best way to showcase my subscription form on a web browser?

I am encountering an issue with my code. My goal is to generate a subscribe form modal. Although I have incorporated the subscribe form in my HTML document, upon running the code in the browser, the subscribe section is not visible. Can anyone offer assist ...

javascripthtmlcssbootstrap-5

Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Although a similar question was asked 6 years ago without any answers, I am currently facing the same issue. Problem: The <video> tag in my Angular/Ionic application overlaps my image and two buttons in iOS Mobile Safari - no matter what I try! It ...

htmlcssiosangularmobile-safari

Is it possible to alter the color of a parent's pseudo-element when it is focused using CSS3?

This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible ...

csscolorspseudo-element

Is it possible to change the name using TextBoxFor in MVC2?

Can someone help me understand why the name attribute for my textbox is not changing even though I manually defined it like this: <%: Html.TextBoxFor(model => model.Name, new { @id = "txt1", @name = "txt1" })%> The id is updated to "txt1" but th ...

htmlasp.netasp.net-mvcasp.net-mvc-2html.textboxfor

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

javascripthtmlreactjs

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

I have successfully implemented server-sent events (HTML5) in my project without using node.js. It is a simple webpage (another JSP page) that makes a call and receives a response. However, when I receive the response, none of the methods/functions (onopen ...

htmljspserver-sent-events

Differences in CSS between IE10 and Chrome are causing compatibility issues

Website in question: What is causing the difference in display between IE 10 and other browsers? The website appears to function correctly on Chrome: IE 10: ...

cssinternet-explorerinternet-explorer-10

I'm encountering an issue with the dropify plugin where the data-allowed-file-

While using the dropify library to style file upload elements in my form, I ran into an issue with the data-allowed-file-extensions parameter not working as expected. Despite specifying allowed file extensions like "png jpg jpeg", the validation for input ...

jqueryhtmlfile-uploaddropify

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

jqueryhtml

Restrict modifications in Sharepoint 2013 to text only

Can content editors be restricted to only adding text on websites? I want to prevent them from using inline styling in HTML or buttons in the editor to add styles. I'm dealing with a few rebellious editors who like to get creative with colors and sty ...

csssharepointtexteditorsharepoint-2013

Tips on how to eliminate focus after choosing a radio button in Angular Material?

This is a snippet from my HTML template file, which includes two Angular Material radio buttons. My goal is to disable the focus on the rings quickly after selecting any radio button. <div id="login-form" class="vh-100 overflow-auto" ...

cssangularmaterial-uiangular-materialmaterial-design

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

Error encountered in Webpack 4 when trying to compile node modules CSS file: Unexpected .(dot) token

I am currently in the process of transitioning my React project from client-side rendering to server-side rendering. Unfortunately, I have encountered an issue with my webpack configuration for CSS that was working perfectly fine in my original project (c ...

cssreactjswebpackreact-ssr

Ways to centrally position elements in a Bootstrap table

I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically: https://i.sstatic.net/rMqSR.png This is how the HTML appears: .table > tbody > tr > td { vertical-align ...

htmlcsstwitter-bootstrapbootstrap-4

Styling X and Y axis font color in charts using JavaFX 2.x CSS

Is there a way to change the font color of both X and Y axes? In my search through the css reference for fonts, I only found properties like font-size, font-style, and font-weight. font-size, font-style and font-weight I attempted to use -fx-font-color ...

cssfonts

Toggle the visibility of a div element and smoothly scroll to it on the page

Upon clicking the form, my goal is to show or hide it and scroll down to view the form. The current code I have in place seems to work after the first click. However, on the initial click, it shows the form but fails to scroll down. Any insights on what I ...

javascriptjqueryhtmlcss

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

In my Angular application, the main navigation consists of a standard toolbar positioned at the top of the page. My goal is to have this navigation bar smoothly scroll up with the user as they scroll down, and then reappear when they scroll back up. I at ...

cssangulartypescriptuser-experience

Overlapping background images of flex elements in Safari

This webpage is designed as a single-page layout using Gatsby: <div className='mainContent'> <section className='contentSection'> <h1 className='header'>Heading</h1> <div c ...

javascripthtmlcssflexboxgatsby

"When you hover over an element, extra information will pop up that only pertains to that specific element and will not impact any surrounding

As I dive into the world of HTML and CSS, I've come across a hurdle when it comes to hovering over divs and displaying hidden elements. The goal is for the card to change color on hover (which I've achieved), expand in size, and reveal hidden con ...

htmlcss