JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  вот так
</div>

CSS

body {
  background: #888;
}

div {
  width: 50%;
  height: 25vh;
  padding: 20px;
  background:
    linear-gradient(to right, #fff, #fff 1px, #0c0 1px) no-repeat left 0 bottom  55px/50.1% calc(100% - 55px),
    linear-gradient(to left, #fff, #fff 1px, #0c0 1px) no-repeat right 0 bottom  55px/50.1% calc(100% - 55px),
    linear-gradient(to top right, #fff, #fff 2%, #0c0 2.5%) no-repeat left 20px bottom  30px/calc(50.1% - 20px) 25px,
    linear-gradient(to top left, #fff, #fff 2%, #0c0 2.5%) no-repeat right 20px bottom  30px/calc(50.1% - 20px) 25px,
    linear-gradient(to top right, transparent 50%, #fff 51%, #fff 52.5%, #0c0 53.5%) no-repeat left 20px bottom 0px/calc(50.1% - 20px) 30px,
    linear-gradient(to top left, transparent 50%, #fff 51%, #fff 52.5%, #0c0 53.5%) no-repeat right 20px bottom 0px/calc(50.1% - 20px) 30px,
    radial-gradient(farthest-side at top right, #0c0 94%, #fff 95%, #fff 100%, transparent 101%) no-repeat left 0 bottom 30px/25px 25px,
    radial-gradient(farthest-side at top left, #0c0 94%, #fff 95%, #fff 100%, transparent 101%) no-repeat right 0 bottom 30px/25px 25px;
}