Notch with Dropshadow

by nate

HTML

<div id="bar"></div>

CSS

#bar {
    background-color: hsl(220, 50%, 50%);
    height: 30px;
    position: relative;
    width: 300px;
}


#bar:before {
    border-bottom: transparent solid 10px;
    border-right: hsla(0, 0%, 0%, 0.1) solid 21px;
    bottom: -12px;
    content: '';
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
}

#bar:after {
    border-bottom: transparent solid 10px;
    border-right: #71a3c1 solid 20px;
    bottom: -10px;
    content: '';
    display: block;
    height: 0;
    left: 0;
    position: absolute;
}