Skip to content

Instantly share code, notes, and snippets.

@nladart
Forked from anonymous/An-Anonymous-Pen.markdown
Created September 16, 2013 15:11
Show Gist options
  • Save nladart/6581969 to your computer and use it in GitHub Desktop.
Save nladart/6581969 to your computer and use it in GitHub Desktop.
<div class="ribbon">
<span>LaDart</span>
</div>
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Arvo:700);
html, body{
height:100%;
}
body{
display:flex;
align-items:center;
justify-content:center;
}
$green: #c74848;
$darker: darken(#c74848, 15%);
$darkest: darken($green, 25%);
.ribbon{
background:#c74848;
font-size:3em;
padding:.5em 1em;
position:relative;
transform:skew(-8deg) rotate(-8deg);
&:before, &:after{
content:'';
display:block;
position:absolute;
border-width:1em .5em 1em .5em;
border-style:solid;
border-color: $darker $darker $darker transparent;
height:0;
width:0;
top:.62em;
left:-1em;
z-index:-5;
}
&:after{
left:100%;
border-color: $darker transparent $darker $darker;
top:-.35em;
}
}
.ribbon span{
position:relative;
text-transform:uppercase;
letter-spacing:3px;
-webkit-text-stroke-width: 1px;
text-shadow:-3px 3px 0px $darker;
font-weight:bold;
font-family:'Arvo';
-webkit-text-stroke-color: #fff;
&:before, &:after{
content:'';
display:block;
position:absolute;
border-width:.2em .2em .2em .2em;
border-style:solid;
border-color: $darker $darker $darkest $darkest;
right:-1em;
top:-.85em;
}
&:after{
left:-1em;
top:1.73em;
width:0;
height:0;
border-color: $darkest $darkest $darker $darker;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment