<h1 class="ribbon-banner"><span>A Pure-CSS Ribbon Banner</span></h1>
@import "compass/css3";
$rear-x-offset: 1em;
$rear-y-offset: .35em;
$ribbon-color: gray;
.ribbon-banner {
display: table; // allows for dynamic width and centered
max-width: 85%; // might need to be adjusted if you make rear elements wider
font-size: 24px;
line-height: 1.1;
position: relative;
background: $ribbon-color;
@include background(linear-gradient(
left,
lighten($ribbon-color, 7%),
$ribbon-color,
lighten($ribbon-color, 7%)
));
color: #fff;
text-align: center;
padding: .3em 1em .3em;
margin: .75em auto 1.25em;
text-shadow: 0 1px 3px darken($ribbon-color, 8%);
&:before,
&:after {
content: "";
position: absolute;
display: block;
bottom: -($rear-y-offset);
border-width: .85em; // adjust according to height of parent
border-style: solid;
border-color: $ribbon-color;
z-index: -1;
}
&:before {
left: -($rear-x-offset);
border-right-width: $rear-x-offset * 1.5;
border-left-width: $rear-x-offset/2;
border-left-color: transparent;
}
&:after {
right: -($rear-x-offset);
border-left-width: $rear-x-offset * 1.5;
border-right-width: $rear-x-offset/2;
border-right-color: transparent;
}
span:before,
span:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: darken($ribbon-color, 12%) transparent transparent transparent;
bottom: -$rear-y-offset;
}
span:before {
left: 0;
border-width: $rear-y-offset 0 0 $rear-x-offset;
}
span:after {
right: 0;
border-width: $rear-y-offset $rear-x-offset 0 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.