A Pen by Tim McNamara on CodePen.
Created
March 15, 2020 02:30
-
-
Save meta-n4vn33t/327de3b27348118fcc6dda82cbfe6616 to your computer and use it in GitHub Desktop.
CSS Stripe background inspired by Stripe Atlas
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
| <html> | |
| <body> | |
| <header> | |
| <div class="stripes"> | |
| <div class="stripe s1"></div> | |
| <div class="stripe s2"></div> | |
| <div class="stripe s3"></div> | |
| </div> | |
| </header> | |
| </body> | |
| </html> |
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
| body { | |
| margin: 0; | |
| } | |
| header { | |
| position: relative; | |
| height: 100vh; | |
| background: linear-gradient(-180deg, #f6bf4e 1%,#f9d281 23%,#fffdf3 71%); | |
| overflow: hidden; | |
| } | |
| .stripes { | |
| position: absolute; | |
| height: 100vh; | |
| width: 100%; | |
| transform: skewY(-10deg); | |
| top: -130px; | |
| } | |
| header .stripes .s1 { | |
| width: 30%; | |
| left: 0; | |
| background: linear-gradient(90deg,#ffad5a,rgba(250,175,82,.25));; | |
| position: absolute; | |
| } | |
| header .stripes .s2 { | |
| width: 38%; | |
| top: 150px; | |
| left: 0; | |
| background: linear-gradient(90deg,#ffcd68,rgba(255,199,107,0));; | |
| position: absolute; | |
| } | |
| header .stripes .s3 { | |
| width: 38%; | |
| top: 300px; | |
| right: 0; | |
| background: linear-gradient(90deg,hsla(46,98%,78%,0),#ffda84);; | |
| position: absolute; | |
| } | |
| .stripe { | |
| height: 150px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment