Skip to content

Instantly share code, notes, and snippets.

@dereksnow

dereksnow/QwXZLb.markdown

Forked from anonymous/QwXZLb.markdown
Last active August 29, 2015 14:19
Show Gist options
  • Save dereksnow/0562a9c1b40f8cc535ea to your computer and use it in GitHub Desktop.
Save dereksnow/0562a9c1b40f8cc535ea to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>
<div id="square"></div>
<div id="square-rad10"></div>
<div id="square-rad25"></div>
<div id="square-rad50"></div>
<div id="square-rad100"></div>
<div id="chevron"></div>
<div id="clear"></div>
<div id="chevron1"></div>
<div id="chevron2"></div>
<div id="chevron3"></div>
<div id="command">build it</div>
Raw
style.css
body {
background: #242424;
}
#square {
width: 200px;
height: 200px;
background: #C75646;
float: left;
margin: 30px;
}
#square-rad10 {
width: 200px;
height: 200px;
background: #8EB33B;
float: left;
border-radius: 10px;
margin: 30px;
}
#square-rad25 {
width: 200px;
height: 200px;
background: #D0B03C;
float: left;
border-radius: 25px;
margin: 30px;
}
#square-rad50 {
width: 200px;
height: 200px;
background: #72B3CC;
float: left;
border-radius: 50px;
margin: 30px;
}
#square-rad100 {
width: 200px;
height: 200px;
background: #C8A0D1;
float: left;
border-radius: 100px;
margin: 30px;
}
#clear {
clear: both;
}
#chevron1 {
position: relative;
top: 100px;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(-90deg);
float: left;
}
#chevron1:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: #C75646;
-webkit-transform: skew(0deg, 12deg);
-moz-transform: skew(0deg, 12deg);
-ms-transform: skew(0deg, 12deg);
-o-transform: skew(0deg, 12deg);
transform: skew(0deg, 20deg);
}
#chevron1:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #C75646;
-webkit-transform: skew(0deg, -12deg);
-moz-transform: skew(0deg, -12deg);
-ms-transform: skew(0deg, -12deg);
-o-transform: skew(0deg, -12deg);
transform: skew(0deg, -20deg);
}
#chevron2 {
position: relative;
top: 100px;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(-90deg);
float: left;
}
#chevron2:before {
content: '';
position: absolute;
top: -90px;
left: 0px;
height: 100%;
width: 50%;
background: #8EB33B;
-webkit-transform: skew(0deg, 12deg);
-moz-transform: skew(0deg, 12deg);
-ms-transform: skew(0deg, 12deg);
-o-transform: skew(0deg, 12deg);
transform: skew(0deg, 20deg);
}
#chevron2:after {
content: '';
position: absolute;
top: -90px;
right: 0;
height: 100%;
width: 50%;
background: #8EB33B;
-webkit-transform: skew(0deg, -20deg);
-moz-transform: skew(0deg, -20deg);
-ms-transform: skew(0deg, -20deg);
-o-transform: skew(0deg, -20deg);
transform: skew(0deg, -20deg);
}
#chevron3 {
position: relative;
top: 100px;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(-90deg);
float: left;
}
#chevron3:before {
content: '';
position: absolute;
top: -180px;
left: 0px;
height: 100%;
width: 50%;
background: #D0B03C;
-webkit-transform: skew(0deg, 20deg);
-moz-transform: skew(0deg, 20deg);
-ms-transform: skew(0deg, 20deg);
-o-transform: skew(0deg, 20deg);
transform: skew(0deg, 20deg);
}
#chevron3:after {
content: '';
position: absolute;
top: -180px;
right: 0;
height: 100%;
width: 50%;
background: #D0B03C;
-webkit-transform: skew(0deg, -20deg);
-moz-transform: skew(0deg, -20deg);
-ms-transform: skew(0deg, -20deg);
-o-transform: skew(0deg, -20deg);
transform: skew(0deg, -20deg);
}
#command {
color: #fff;
position: absolute;
font-size: 300px;
font-family: 'Roboto', sans-serif;
top: 240px;
left: 500px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment