css3 уголок

by Vladislav Altyncev

HTML

<div class="transform">Transform</div>

CSS

.transform {
        background: -moz-linear-gradient(center top , #fff 10%, red 40%, #000 100%) repeat scroll 0 0 transparent;
    box-shadow: 5px 2px 5px #000;
    position:relative;    
    margin:50px;
    width:200px;
    height: 40px;
    padding:10px 0px;
    color:#ccc;    
}

.transform:after{
    content:'';
    box-shadow: 4px 2px 5px #000;
    position:absolute;
    right:-18px;
    top:0;
    bottom:0;    
    width: 35px;
    height: 60px;
    background: -moz-linear-gradient(center top , #fff 10%, red 40%, #000 100%) repeat scroll 0 0 transparent;
    
    -webkit-transform:skewX(30deg);
    -moz-transform:skewX(30deg);
    -ms-transform:skewX(30deg);
    -o-transform:skewX(30deg);
    transform:skewX(30deg);    
}