Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 6, 2014 19:03
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Oct 6, 2014.
    113 changes: 113 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,113 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style id="jsbin-css">
    .tri {
    margin-top: 50px;
    }

    .plus, .minus {
    display: inline-block;
    position: relative;
    }


    .plus {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 34px 34px 0 0;
    border-color: #076591 transparent transparent transparent;

    }

    .minus {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 34px 34px;
    border-color: transparent transparent #076591 transparent;

    left: -36px;
    top: 2px;
    }

    .minus::after {
    content: "-";
    position: absolute;
    right: 6px;
    top: 12px;
    }

    .plus::after {
    content: "+";
    position: absolute;
    bottom: 12px;
    left: 6px
    }

    .plus::after, .minus::after {
    font-size: 20px;
    color: white;
    }
    </style>
    </head>
    <body>
    <div class="tri">
    <a href="#plus" class="plus"></a>
    <a href="#minus" class="minus"></a>
    </div>


    <script id="jsbin-source-css" type="text/css">.tri {
    margin-top: 50px;
    }

    .plus, .minus {
    display: inline-block;
    position: relative;
    }


    .plus {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 34px 34px 0 0;
    border-color: #076591 transparent transparent transparent;

    }

    .minus {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 34px 34px;
    border-color: transparent transparent #076591 transparent;

    left: -36px;
    top: 2px;
    }

    .minus::after {
    content: "-";
    position: absolute;
    right: 6px;
    top: 12px;
    }

    .plus::after {
    content: "+";
    position: absolute;
    bottom: 12px;
    left: 6px
    }

    .plus::after, .minus::after {
    font-size: 20px;
    color: white;
    }</script>
    </body>
    </html>
    48 changes: 48 additions & 0 deletions jsbin.hiqimitiyogi.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    .tri {
    margin-top: 50px;
    }

    .plus, .minus {
    display: inline-block;
    position: relative;
    }


    .plus {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 34px 34px 0 0;
    border-color: #076591 transparent transparent transparent;

    }

    .minus {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 34px 34px;
    border-color: transparent transparent #076591 transparent;

    left: -36px;
    top: 2px;
    }

    .minus::after {
    content: "-";
    position: absolute;
    right: 6px;
    top: 12px;
    }

    .plus::after {
    content: "+";
    position: absolute;
    bottom: 12px;
    left: 6px
    }

    .plus::after, .minus::after {
    font-size: 20px;
    color: white;
    }