Created
May 13, 2016 22:44
-
-
Save syntacticsugar/0ad8467fb204c1d86b75649c68d02794 to your computer and use it in GitHub Desktop.
trapezoid tab
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Trapezoid tabs | |
*/ | |
body { | |
padding: 40px; | |
font: 130%/2 Frutiger LT Std, sans-serif; | |
} | |
nav { | |
position: relative; | |
z-index: 1; | |
padding-left: 1em; | |
} | |
nav > a { | |
position: relative; | |
display: inline-block; | |
padding: .3em 1em 0; | |
color: inherit; | |
text-decoration: none; | |
margin: 0 -.3em; | |
} | |
nav > a::before, | |
main { | |
border: none; | |
} | |
nav a::before { | |
content: ''; /* To generate the box */ | |
position: absolute; | |
top: 0; right: 0; bottom: 0; left: 0; | |
z-index: -1; | |
border-bottom: none; | |
border-radius: 0em 0em 0 0; | |
background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0)); | |
box-shadow: 0 .15em white inset; | |
border: none; | |
transform: scale(1.2, 1.3) perspective(0.5em) rotateX(5deg); | |
transform-origin: bottom left; | |
} | |
main { | |
display: block; | |
margin-bottom: 1em; | |
background: #eee; | |
padding: 1em; | |
border-radius: .15em; | |
} | |
nav.left > a::before { | |
} |
Author
syntacticsugar
commented
May 13, 2016
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment