JSFiddle - React, Tailwind, and code Playground

by Nik Shevchenko

HTML

<div class="bg-outer b1">
  <div class="bg-top"></div>
  <div class="bg-inner">Test</div>
</div>

CSS

html {
  min-height: 100%;
  background-color: #fff;
}
.bg-outer {
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 50px;
  vertical-align: top;
  font-size: 2em;
  color: #fff;
}
.b1 {
  width: 400px;
}
.b2 {
  width: 250px;
}
.b1 .bg-top {
  box-shadow: 0 0 0 1000px #669;
}
.b2 .bg-top {
  box-shadow: 0 0 0 1000px #c33;
}
.bg-inner {
  position: relative;
  padding: 30px 30px 50px;
}
.bg-top {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 500%;
  border-radius: 50%;
  transform: translate(-50%, -1%);
}
.bg-top:before {
  content: "";
  display: block;
  padding: 100% 0 0;
}