Skip to content

Instantly share code, notes, and snippets.

@lsolesen
Created October 25, 2013 04:58
Show Gist options
  • Select an option

  • Save lsolesen/7149604 to your computer and use it in GitHub Desktop.

Select an option

Save lsolesen/7149604 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="skew">
<p>Testing</p>
</div>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----
.skew {
width:300px;
background:#000;
position:relative;
margin:40px 0 20px;
color:#fff;
font-weight:bold;
font-size:140%;
}
.skew:after {
border-bottom: 28px solid black;
border-right: 302px solid transparent;
content: " ";
height: 0;
overflow: hidden;
position: absolute;
top: -28px;
width: 0;
}
.skew p {
margin:0;
padding:0 0 0 10px;
position:relative;
z-index:2;
top:-10px;
}
.skew {
width: 300px;
background: #000;
position: relative;
margin: 40px 0 20px;
color: #fff;
font-weight: bold;
font-size: 140%;
}
.skew:after {
border-bottom: 28px solid black;
border-right: 302px solid transparent;
content: " ";
height: 0;
overflow: hidden;
position: absolute;
top: -28px;
width: 0;
}
.skew p {
margin: 0;
padding: 0 0 0 10px;
position: relative;
z-index: 2;
top: -10px;
}
<div class="skew">
<p>Testing</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment