Skip to content

Instantly share code, notes, and snippets.

@LeaVerou
Created October 7, 2013 13:23
Show Gist options
  • Save LeaVerou/6867917 to your computer and use it in GitHub Desktop.
Save LeaVerou/6867917 to your computer and use it in GitHub Desktop.
Easy trapezoids with 3D transforms
/**
* Easy trapezoids with 3D transforms
*/
p {
position: relative;
display: inline-block;
padding: 1em;
margin: 2em;
}
p::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: skyblue;
transform: perspective(4px) rotateX(1deg);
}
p.tab::before {
/* Tip by @krofdrakula */
border-radius: 10px 10px 0 0;
}
<p>Trapezoid</p>
<p class="tab">Trapezoid tab</p>
// alert('Hello world!');
{"view":"split","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