Fronteers artikel: voorbeeld 1

by lensco

HTML

<h1><span>Hey, een scheef blokje zonder afbeeldingen!</span></h1>

CSS

h1 {
    font: 18px/1.1 Georgia;
    font-style: italic;
    background: purple;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
    }
    h1 span {
        display: inline-block;
        -webkit-transform: skew(10deg);
        -moz-transform: skew(10deg);
        -ms-transform: skew(10deg);
        -o-transform: skew(10deg);
        transform: skew(10deg);        
        }