<body>
<h2 class="ribbon">I am the prettiest header</h2>
<p>Cupcake ipsum dolor sit. Amet dessert marzipan. Chocolate cake chocolate cake dragée wafer I love wafer. Icing lemon drops gummi bears macaroon jelly beans pudding tart croissant. Cotton candy ice cream bonbon. I love pie I love cotton candy dragée. Ice cream cake jelly pudding tootsie roll. Jelly beans powder I love macaroon danish pudding. Icing tiramisu soufflé cookie soufflé icing biscuit. Cookie sweet candy lollipop. Toffee candy carrot cake I love sweet roll bear claw brownie. Lemon drops I love sugar plum toffee. I love sesame snaps sesame snaps.</p>
<h3 class="ribbon">Nope, I'm the prettiest</h3>
<p>Danish tart icing halvah chocolate bar oat cake. Jelly-o pastry cheesecake chocolate donut pudding icing candy. Cookie pastry I love sweet roll wypas bonbon liquorice. Faworki fruitcake bonbon cake gummies. Tootsie roll jelly pie toffee marzipan jujubes biscuit. Bonbon cake croissant I love gummies gummi bears soufflé danish chocolate. Gummies jelly-o cupcake cake sugar plum croissant. I love I love bonbon sweet roll. Danish jelly chocolate jelly beans toffee marshmallow croissant. Chocolate I love fruitcake tootsie roll chocolate. Ice cream muffin cake lollipop sweet roll lollipop jujubes biscuit I love. Jelly pie bear claw oat cake. Ice cream I love cheesecake pie apple pie lollipop liquorice. Jujubes pudding halvah tiramisu.</p>
<h4 class="ribbon">Who cares? I'm smartest.</h4>
<p>Liquorice cheesecake sweet I love candy canes I love marzipan cotton candy caramels. Donut gingerbread marshmallow. Halvah gingerbread brownie wypas dessert toffee wypas halvah pastry. Sweet roll wafer carrot cake danish gummies applicake. Jujubes gingerbread fruitcake. Bear claw chocolate cake halvah cake I love marzipan danish jelly beans. Toffee dessert chocolate cake muffin. Gummies cake powder gummi bears I love oat cake candy canes. Sweet roll candy canes oat cake donut muffin powder jelly jelly. Macaroon tiramisu candy canes soufflé applicake croissant. Gingerbread tootsie roll candy tootsie roll candy canes chocolate I love jelly beans I love. Pudding danish I love.</p>
</body>@import "compass/css3";
/* Playing with the methods outlined here
https://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/ */
body {
margin: 40px;
padding: 20px;
border: 1px solid #999;
}
%ribbon {
position:relative;
float:left;
clear:both;
padding:10px 10px 10px 20px;
margin-left:-40px;
margin-bottom:20px;
-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
box-shadow:2px 2px 0 rgba(0,0,0,0.1);
&:before {
content:" ";
border-style: solid;
border-width: 10px;
display:block;
position:absolute;
bottom: -10px;
left:0;
margin-bottom:-10px;
z-index:-1;
}
}
h2.ribbon {
@extend %ribbon;
color:#fff;
background:#f82772;
text-shadow:0 -1px darken(#f82772, 15%), 0 1px darken(#f82772, 15%);
&:before {
border-color: #d70058 #d70058 transparent transparent;
}
}
h3.ribbon {
@extend %ribbon;
color:#fff;
background: #195a7b;
text-shadow:0 -1px darken(#195a7b, 15%), 0 1px darken(#195a7b, 15%);
&:before {
border-color: #004161 #004161 transparent transparent;
}
}
h4.ribbon {
@extend %ribbon;
color: #333;
background: #feec2d;
text-shadow:0 -1px darken(#feec2d, 15%), 0 1px darken(#feec2d, 15%);
&:before {
border-color: #e1d100 #e1d100 transparent transparent;
}
}
.ribbon + p {
clear: both;
}
External CSS
This Pen doesn't use any external CSS resources.