Skip to content

Instantly share code, notes, and snippets.

Created April 25, 2013 00:48

Revisions

  1. @invalid-email-address Anonymous created this gist Apr 25, 2013.
    46 changes: 46 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    /**
    * trapezoid
    */

    span {
    display: block;
    z-index: 1;
    position: relative;

    /* set trapezoid size */
    width: 300px;
    height: 70px;

    /* edit text styling here */
    margin: 100px auto;
    font: 16px/50px Helvetica, sans-serif;
    text-align: center;
    color: white;
    background-color: cyan;
    }

    span:before,
    span:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;

    /* more styling */
    border-radius: 6px;
    background-color: black;
    }

    span:before {
    transform: skew(25deg);
    left: 25px;
    }

    span:after {
    transform: skew(-25deg);
    right: 25px;
    left: auto;
    100
    1 change: 1 addition & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <span>Trapezium</span>
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}