Уголок с тенью

by LuckyCat

HTML

<div class="bordered bubble bottom center s-shadow">
        Bordered bubble, tail positioned at bottom center with south shadow.
    </div>

CSS

.bubble {
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    padding: 10px;
    position: relative;
    width: 280px;
    background: #ff0;
}


.bottom {
    margin: 30px auto;
}


.bottom:before {
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);

}

.bottom:before {
    bottom: -9px;
}

.center:before {
    left: 50%;
    margin-left: -12.5px;
}

.s-shadow {
    -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,.6);
    -moz-box-shadow: 0px 5px 5px rgba(0,0,0,.6);
    box-shadow: 0px 5px 5px rgba(0,0,0,.6);
    
}
.s-shadow.bottom:before {
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.6);
    -moz-box-shadow: 3px 3px 5px rgba(0,0,0,.6);
    box-shadow: 3px 3px 5px rgba(0,0,0,.6);

    clip: rect(0px, 40px, 40px, 0px);
}

.bordered {
    background: #ff0;
    border: 3px #aa0000 solid;  
}
.bordered:before {
    background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.45, transparent), color-stop(0.451, #FFFFFF));
    background: -webkit-linear-gradient(top left, transparent 45%, #fff 45.1%);
    background: -moz-linear-gradient(top left, transparent 45%, #fff 45.1%);
    background: linear-gradient(top left, transparent 45%, #fff 45.1%);
    border-right: 3px #aa0000 solid;
    border-bottom: 3px #aa0000 solid;
    bottom: -16px;
}