Правильные маленькие уголки

by 5p17f1Re

HTML

<div class="block">
    <div class="block-inner">
        Block
    </div>
</div>

CSS

body {padding:20px; font:10pt tahoma;}

.block {
    display:inline-block;    
    position:relative;
    background:#fff;    
}

.block:after {
    content:''; display:block;
    position:absolute; top:10px; left:10px; z-index:-1;
    width:100%; height:100%;
    background:#0081AB;        
}

.block-inner {    
    width:200px; height:100px;
    border:2px solid #00ABD3;
    position:relative;
    padding:10px;
}

.block-inner:before,
.block-inner:after {
    content:''; display:block;
    position:absolute;
    width:0; heigth:0;
    border:5px solid transparent;
}

.block-inner:before {
    top:-2px; right:-12px;
    border-bottom-color:#0081AB; border-left-color:#0081AB;
}

.block-inner:after {
    bottom:-12px; left:-2px;
    border-top-color:#0081AB; border-right-color:#0081AB;
}