hello, I would like to know how can I create css bookmark ribbon horizontally aligned with text? Here is the example screenshot
Any example custom CSS or bootstrap solution or tutorial link for this, thanks.
You can use the below CSS for creating horizontal bookmark ribbon
.bookmarkRibbon {
width: 105px;
height: 0;
border-bottom: 20px solid #045089;
border-top: 20px solid #045089;
border-left: 15px solid transparent;
float: right;
margin-bottom: 20px;
font-size: 17px;
font-weight:700;
position: absolute;
right: 0px;
top: 20px;
}
HTML
<div class="bookmarkRibbon"><span style="color:white;position: relative;top: -9px;text-align: center;right: -10px;">20% OFF</span></div>
Here is the working fiddle for you to test.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly