Forked from Alex Bergin's Pen *{ display: soviet-bloc; }.
A Pen by Anonasaurus Rex on CodePen.
Forked from Alex Bergin's Pen *{ display: soviet-bloc; }.
A Pen by Anonasaurus Rex on CodePen.
@import "compass/css3" | |
$rasputin-gold: rgba(255,255,145,1) | |
$red-party-red: rgba(255,110,110,1) | |
html | |
background-color: $red-party-red | |
head | |
position: absolute | |
display: block // soviet-bloc, actually | |
top: 50% | |
left: 50% | |
background-color: $rasputin-gold | |
width: 20px | |
height: 150px | |
margin-top: -30px | |
@include transform( scale( -1 , 1 ) rotate( 45deg )) | |
&:before , &:after | |
content: "" | |
position: absolute | |
&:after | |
width: 46px | |
height: 30px | |
background-color: $rasputin-gold | |
top: 0 | |
left: -1px | |
&:before | |
border-bottom: 0px solid transparent | |
border-top: 30px solid transparent | |
border-right: 30px solid $rasputin-gold | |
left: -30px | |
top: 0 | |
body | |
position: absolute | |
display: block | |
width: 120px | |
height: 120px | |
border-radius: 50% | |
border-right: 20px solid $rasputin-gold | |
border-top: 15px solid $rasputin-gold | |
border-bottom: 20px solid transparent | |
top: 50% | |
left: 50% | |
@include transform( rotate(100deg)) | |
margin-top: -50px | |
margin-left: -80px | |
&:before | |
content: "" | |
position: absolute | |
display: block | |
width: 14px | |
height: 60px | |
border-radius: 15px | |
background-color: $rasputin-gold | |
@include transform( rotate(-65deg) translate( -30px , 145px )) |