Skip to content

Instantly share code, notes, and snippets.

@afraser
Created Jul 25, 2012
Embed
What would you like to do?
ribbon banner
/**
* ribbon banner
*/
body{
background: #333;
padding: 35px 0 0;
position: relative;
}
.ribbon {
position:relative;
width: 241px;
margin: 0 auto;
}
.ribbon:before {
content: "";
margin-top:0.5em;
float: left;
border:1.5em solid #FFF;
border-left: 20px solid transparent;
}
.ribbon:after {
content: "";
margin-top:0.5em;
/*float: left;*/
position: absolute;
right: 0;
border:1.5em solid #fff;
border-right: 20px solid transparent;
}
.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 2em;
position:absolute;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #CCC;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #CCC;
border-bottom:0.5em solid #fff;
}
<div class='ribbon'>
<span>Example Text</span>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment