Skip to content

Instantly share code, notes, and snippets.

/QwXZLb.markdown

Created April 12, 2015 03:58
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Apr 12, 2015.
    7 changes: 7 additions & 0 deletions QwXZLb.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    QwXZLb
    ------


    A [Pen](http://codepen.io/anon/pen/QwXZLb) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/QwXZLb/license).
    14 changes: 14 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <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>
    190 changes: 190 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,190 @@
    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;
    }