JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="corner_shape_top_right">
  <div class="corner_shape_top_right_out">
  </div>
</div>
<div class="corner_shape_top_left">
  <div class="corner_shape_top_left_out">
  </div>
</div>
<div class="corner_shape_bottom_right">
  <div class="corner_shape_bottom_right_out">
  </div>
</div>
<div class="corner_shape_bottom_left">
  <div class="corner_shape_bottom_left_out">
  </div>
</div>

CSS

body{
  position:relative;
}
.corner_shape_top_right{
  display: block;
  position:absolute;
  top: 0;
  right: 0;
  background: #29292b;
  width:50px;
  height:50px;
  transform: rotate(90deg);
}
.corner_shape_top_right_out{
  position:absolute;
  right:0;
  bottom:0;
  width:49px;
  height:49px;
  background: red;
  -webkit-border-top-left-radius: 1000px;
  -moz-border-radius-topleft: 1000px;
  border-top-left-radius: 1000px;
}

.corner_shape_top_left{
  display: block;
  position:relative;
  background: #29292b;
  width:50px;
  height:50px;
}
.corner_shape_top_left_out{
  position:absolute;
  right:0;
  bottom:0;
  width:49px;
  height:49px;
  background: red;
  -webkit-border-top-left-radius: 1000px;
  -moz-border-radius-topleft: 1000px;
  border-top-left-radius: 1000px;
}