Skip to content

Instantly share code, notes, and snippets.

Created April 25, 2013 00:48
Show Gist options
  • Save anonymous/5456739 to your computer and use it in GitHub Desktop.
Save anonymous/5456739 to your computer and use it in GitHub Desktop.
trapezoid
/**
* trapezoid
*/
span {
display: block;
z-index: 1;
position: relative;
/* set trapezoid size */
width: 300px;
height: 70px;
/* edit text styling here */
margin: 100px auto;
font: 16px/50px Helvetica, sans-serif;
text-align: center;
color: white;
background-color: cyan;
}
span:before,
span:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* more styling */
border-radius: 6px;
background-color: black;
}
span:before {
transform: skew(25deg);
left: 25px;
}
span:after {
transform: skew(-25deg);
right: 25px;
left: auto;
100
<span>Trapezium</span>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment