JSFiddle - React, Tailwind, and code Playground

by Liu David

HTML

<div class="bordered">Lorem Ipsum Dolor Sit Amet</div>

CSS

.bordered{
    position: relative;
    height: 75px;
    width: 100%;
    border-bottom: 20px solid black;
    background: #EEE;
    padding-top: 10px;
}
.bordered:after{
    position: absolute;
    content: '';
    bottom: -30px;
    left: 0px;
    height: 10px;
    width: 100%;
    background-size: 16px 15px;
    background-position: -5px -5px;
    background-image: -webkit-radial-gradient(50% 0%, circle, black 48%, transparent 55%);
    background-image: -moz-radial-gradient(50% 0%, circle, black 48%, transparent 55%);
    background-image: radial-gradient(circle at 50% 0%, black 48%, transparent 55%);
    
    -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.2) 2px 2px 1px);
}