Full CSS Ribbon on 1 element

Developer
Jeff Wainwright
Size
2,671 Kb
Views
12,144
  1. Full CSS Ribbon on 1 element Previews
  2. Full CSS Ribbon on 1 element HTML Codes
  3. Full CSS Ribbon on 1 element CSS Codes

How do I make an full css ribbon on 1 element?

Updated CSS ribbon: switched to sass, pixels to ems; might be a bit more modular. Thanks Esteban!Forked from Esteban Beltran's Pen Single element CSS Left Ribbon.. What is a full css ribbon on 1 element? How do you make a full css ribbon on 1 element? This script and codes were developed by Jeff Wainwright on 08 December 2022, Thursday.

Full CSS Ribbon on 1 element Previews
IQ Test

Full CSS Ribbon on 1 element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full CSS Ribbon on 1 element</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div> <h2 class="bb-year-end-ribbon">Single Element Ribbon</h2>
</div>
<div> <h3 class="bb-year-end-ribbon">Single Element Ribbon</h3>
</div>
<div> <p class="bb-year-end-ribbon">Single Element Ribbon</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Full CSS Ribbon on 1 element - Script Codes CSS Codes

body { margin: 0; padding: 0; text-align: center; font-family: helvetica, arial, sans-serif;
}
h2, h3 { font-weight: 100 !important;
}
.bb-year-end-ribbon,
.bb-year-end-ribbon:before,
.bb-year-end-ribbon:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.bb-year-end-ribbon { background: #ff6567; position: relative; color: white; display: inline-block; padding: .5em 1em; text-align: center; text-transform: uppercase;
}
.bb-year-end-ribbon:before, .bb-year-end-ribbon:after { background: #d95658; position: absolute; top: .6em; content: ' '; height: 0; border: 1.05em solid transparent; border-left: .9em solid white;
}
.bb-year-end-ribbon:before { left: -1.85em;
}
.bb-year-end-ribbon:after { right: -1.85em; transform: rotate(180deg);
}
Full CSS Ribbon on 1 element - Script Codes
Full CSS Ribbon on 1 element - Script Codes
Home Page Home
Developer Jeff Wainwright
Username yowainwright
Uploaded December 08, 2022
Rating 3
Size 2,671 Kb
Views 12,144
Do you need developer help for Full CSS Ribbon on 1 element?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Wainwright (yowainwright) Script Codes
Name
Stickybits Multiple Instances Demo
Noframe.js Example
Shave, a javascript plugin for truncating text
Meeting Schedule Widget with Angular
Playing with URLs and ScrollSpy
Quick Bootstrap ScrollSpy Demo
Stickybits Demo
Multiple Swiper Demo
Reframe.js Demo
A Pen by Jeff Wainwright
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!