drop effect

by brico

HTML

<div class="around">
    <div class="box">#1!!</div>
    <div class="under">This should get overlaid</div>
</div>

CSS

.around {
    position: relative;
}
.under {
    padding: 5px;
    background: yellow;
    margin-top: 13px;
    position: relative;
    height: 90px;
    width: 90px;
}
.box {
    margin: 0;
    padding: 5px;
    background: orange;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 10;
    left: 10px;
    top: -5px;
}
.box:before {
    content: '';
    border-color: white grey grey white;
    border-width: 3px;
    border-style: solid;
    display: block;
    position: absolute;
    left: -6px;
    top: 0;
    width: 0px;
    height: 0px;
}