Experiment to match the stripes on the Stripe website
A Pen by Jon Munson on CodePen.
Experiment to match the stripes on the Stripe website
A Pen by Jon Munson on CodePen.
<div id="stripes"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> |
#stripes { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
-webkit-transform: skewY(-12deg); | |
transform: skewY(-12deg); | |
-webkit-transform-origin: 0; | |
transform-origin: 0; | |
background: -webkit-linear-gradient(300deg,#53f 15%,#05d5ff 70%,#a6ffcb 94%); | |
background: linear-gradient(150deg,#53f 15%,#05d5ff 70%,#a6ffcb 94%); | |
} | |
#stripes, #stripes span { | |
position: absolute; | |
} | |
#stripes span { | |
height: 40px; | |
} | |
@media (min-width: 880px) { | |
#stripes :nth-child(1) { | |
width: 33.33333%; | |
left: -16.66666%; | |
background: #53f; | |
} | |
} | |
@media (min-width: 670px) { | |
#stripes :nth-child(1) { | |
top: 0; | |
background: #4750ff; | |
} | |
#stripes :nth-child(3) { | |
width: 33.33333%; | |
right: auto; | |
background: #11bdff; | |
} | |
#stripes :nth-child(3) { | |
width: 25%; | |
bottom: 0; | |
right: 0; | |
background: #a1ffc8; | |
} | |
} | |
#stripes :nth-child(1) { | |
width: 50%; | |
left: 50%; | |
top: 40px; | |
background: #4c29ff; | |
} | |
@media (min-width: 880px) { | |
#stripes span { | |
height: 190px; | |
} | |
#stripes :nth-child(2) { | |
width: 33.33333%; | |
top: 0; | |
left: 16.66666%; | |
right: auto; | |
background: #4553ff; | |
} | |
#stripes :nth-child(3) { | |
width: 33.33333%; | |
left: 49.99999%; | |
bottom: auto; | |
background: #4f40ff; | |
} | |
#stripes :nth-child(4) { | |
width: 33.33333%; | |
top: 380px; | |
right: -16.66666%; | |
background: #25ddf5; | |
} | |
#stripes :nth-child(5) { | |
width: 33.33333%; | |
bottom: 0; | |
background: #1fa2ff; | |
} | |
} | |
@media (min-width: 670px) { | |
#stripes span { | |
height: 150px; | |
} | |
#stripes :nth-child(2) { | |
width: 16.66667%; | |
top: 300px; | |
bottom: auto; | |
background: #0dcfff; | |
} | |
#stripes :nth-child(2) { | |
width: 14%; | |
right: 0; | |
bottom: 40px; | |
background: #2be7ff; | |
} | |
} | |
///// | |