JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<div class="box">
<div class="corner">Amazing Corner</div>
</div>CSS
.box {width:300px;height:150px;background-color:green;border-radius:6px;}
.corner {float:right;line-height:24px;padding:0 20px;background-color:#ffffff;border-radius:0 0 0 5px;position:relative;}
.corner::before, .corner::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGBAMAAAAS4vJ7AAAAFVBMVEUAAAD///////////////////////9Iz20EAAAAB3RSTlMA/p9BOxfrEGeovwAAABtJREFUCNdjCFYUZGBgSWRgYHAEYiYgZgZiVgAV9AE2qs3TRwAAAABJRU5ErkJggg==');
}
.corner::before {
top: 0;
left: -6px;
}
.corner::after {
bottom: -6px;
right: 0px;
}