Can anyone help me figure out how to create a ribbon similar to the image below using CSS? I have managed to make the slanted filled box with text inside, but I am having trouble with the flaps.
Check out this CodePen link for reference.
Can anyone help me figure out how to create a ribbon similar to the image below using CSS? I have managed to make the slanted filled box with text inside, but I am having trouble with the flaps.
Check out this CodePen link for reference.
Here is a demonstration of how you can achieve this unique ribbon effect using HTML and CSS. The structure consists of a parent div containing the ribbon text, along with two additional div elements for creating the folded sections at the top and bottom of the ribbon. These elements are strategically positioned to create the desired visual effect.
body {
font-size: 18px;
color: #FFF;
}
.container {
margin: 50px 100px;
}
.ribbon {
position: absolute;
width: 400px;
text-align: center;
background: #000;
padding: 20px 5px 20px 5px;
-webkit-transform: skew(1deg, -15deg);
-moz-transform: skew(1deg, -15deg);
-o-transform: skew(1deg, -15deg);
-ms-transform: skew(1deg, -15deg);
transform: skew(1deg, -15deg);
/* Note: The best practice is to always add the un-prefixed standards version as last */
}
.ribbon_before {
height: 25px;
width: 50px;
position: relative;
border: 2px solid black;
top: 116px;
left: 2px;
}
.ribbon_after {
height: 25px;
width: 50px;
position: relative;
border: 2px solid black;
top: -56px;
left: 355px;
}<div class="container">
<div class='ribbon_before'> </div>
<div class="ribbon">LOREM IPSUM DOLOR SIT AMET</div>
<div class='ribbon_after'> </div>
</div>Check out the CodePen demo here
Note: You can also achieve a similar effect using a single div element and pseudo-elements, as illustrated in the following code snippet.
body {
font-size: 18px;
color: #FFF;
}
.ribbon {
margin: 100px 100px;
position: relative;
width: 400px;
text-align: center;
background: #000;
padding: 20px 5px 20px 5px;
-webkit-transform: skew(1deg, -15deg);
-moz-transform: skew(1deg, -15deg);
-o-transform: skew(1deg, -15deg);
-ms-transform: skew(1deg, -15deg);
transform: skew(1deg, -15deg);
}
.ribbon:before {
height: 25px;
width: 50px;
position: absolute;
content: '';
border: 2px solid black;
bottom: -8px;
left: 0px;
-webkit-transform: skew(-1deg, 15deg);
-moz-transform: skew(-1deg, 15deg);
-o-transform: skew(-1deg, 15deg);
-ms-transform: skew(-1deg, 15deg);
transform: skew(-1deg, 15deg);
}
.ribbon:after {
height: 25px;
width: 50px;
position: absolute;
content: '';
border: 2px solid black;
top: -8px;
right: 0px;
-webkit-transform: skew(-1deg, 15deg);
-moz-transform: skew(-1deg, 15deg);
-o-transform: skew(-1deg, 15deg);
-ms-transform: skew(-1deg, 15deg);
transform: skew(-1deg, 15deg);
}<div class="ribbon">LOREM IPSUM DOLOR SIT AMET</div>Customized Solution by OP:
The code has been modified slightly to enhance its appearance towards perfection. You can view the updated version at
After researching the /deep/ and ::shadow selectors, I've come across conflicting information. In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector? It was noted that Chrome has deprecated the /deep/ combinator and i ...
How should events be managed with ajax-loaded content that can be hidden or displayed? I have created a sidebar in HTML that toggles visibility on click, along with two pages that are loaded using ajax. When the sidebar is hidden or displayed, I need to ...
Encountering challenges in achieving the desired responsiveness for a grid layout consisting of details and an image. The layout displays correctly on desktop screens, with details on the left and the image on the right. However, on mobile screens, the ima ...
Check out my code snippet: <div class="car"> <div class="make">NISSAN</div> <div class="model">MICRA</div> </div> <div class="discontinued"> <div class="car"> <div class="make">FOR ...
Currently, I am utilizing the Bootstrap grid system with its 12-column setup, which is working well. However, my designer has requested that I make the Tablet view an 8-column system, with each column taking up 100% of the width and no gutters in between. ...
Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...
Working on a new project that involves streaming audio files (mp3) and recording voice messages. Initially considered using Flash, but the challenge is making the website iPhone-friendly as per the client's request. Is there a technology available th ...
Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...
I am currently working on a web application built with ReactJS. One feature that I would like to include is similar to the following: https://i.sstatic.net/At1Gw.gif My query is as follows: What is this specific effect called? How can I go about imple ...
I have come across many different methods for expanding elements on webpages, such as using divs with javascript and jquery. I am curious to know what the most optimal and user-friendly approach is in terms of performance, among other things. For instance ...
I'm struggling with this puzzle game. Sometimes, when I start a new game, the pieces get shuffled incorrectly. I tried adding a function to fix it, but it doesn't seem to be working. It's really frustrating and I want to simplify the code as ...
Since the HTML is hosted on another server and I have no control over it, how can I use CSS to style certain list items? For example, The HTML on the server side: <ol> <li>Coffee</li> <li>Milk</li> <li>Orange Juice< ...
I'm attempting to generate a circular shape using the ::after pseudo element, which adjusts its size automatically based on the content inside. .container { display: flex; flex-direction: row; } #dividerHost2 #left { flex: 1 1 auto; ...
Need help with iframe content retrieval $('.theiframe').load(function(){ var content = $(this.contentDocument).find('pre').html(); } I'm facing an issue where the iframe content is retrieved properly in FF, Chrome, and IE 8,9 ...
Here is a link to my fiddle: https://jsfiddle.net/aod4rmx8/ .background{ position: absolute; left: 0; width:50%; right: 0; bottom: 0; top:0; background-color: #000; /*box-shadow: 100px 0 40px 6px rgba(0, 0, 0, 1);*/ -webk ...
I'm attempting to create an interface similar to Slack, featuring a message box fixed at the bottom using Bootstrap 4. However, when I use the fixed-bottom class (where my custom message-box col is located), it spans the entire width of the window, wh ...
Having trouble changing the placeholder value in a Bootstrap-based floating input. I want to display default text as a placeholder and allow users to edit it. Any suggestions? Check out this example on CodeSandbox <div class="form-floating mb-3&qu ...
Hey there! I was working on creating an order form for my website, and everything was going smoothly until I hit a snag while styling the webpage. The problem is that the legends of the form are extending all the way to the right side of the page, and the ...
Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...
I'm struggling with understanding how to merge cells in a table. Can someone explain the rules for merging table cells to me? I want to remove certain cells from the table without using CSS, I just want to make it look clean. <table border="1" ...