Demo Document Icon with CSS3 - CSS Polygonal | CSS: Presentation Layer

Standards Based Development

Styles

.icon-document{
        background:#eee;
        background:-moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
        background:-webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
        border:1px solid #ccc;
        -moz-border-radius:3px 15px 3px 3px;
        -webkit-border-radius:3px 15px 3px 3px;
        border-radius:3px 15px 3px 3px;
        -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
        -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
        box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
        display:block;
        width:40px;
        height:56px;
        position:relative;
        text-indent:-9999em;
        margin:42px auto;
    }
     .icon-document:before
    {
        content:"";
        display:block;
        position:absolute;
        top:0;
        right:0;
        width:15px;
        height:15px;
        background:#ccc;
        background:-moz-linear-gradient(45deg, #fff 0,  #eee 50%, #ccc 100%);
        background:-webkit-linear-gradient(45deg, #fff 0,  #eee 50%, #ccc 100%);
        box-shadow:rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
        border-bottom:1px solid #ccc;
        border-left:1px solid #ccc;
        -moz-border-radius:0 14px 0 0;
        -webkit-border-radius:0 14px 0 0;
        border-radius:0 14px 0 0;
    }
.icon-document:after
    {
        content:"";
        display:block;
        position:absolute;
        left:0;
        top:0;
        width:60%;
        margin:22px 20% 0;
        background:#ccc;
        background:-moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
        background:-webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
        height:15px;
    }