JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<div class="one">
  <div class="two"></div>
</div>

CSS

.one {
  height: 100px;
  width: 100px;
  margin: 100px;
  position: relative;
  overflow: hidden;
}
.two {
  position: absolute;
  top: 25%;
  left: 25%;
  height: 50%;
  width: 50%;
  background: red;
}
.one:before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0%;
  height: 50%;
  top: -42%;
  border-radius: 50%;
  border-bottom: 30px solid red;
}
.two:before {
  content: "";
  position: absolute;
  height: 200%;
  top: -50%;
  width: 100%;
  left: -136%;
  border-radius: 50%;
  border-right: 30px solid red;
}
.two:after {
  content: "";
  position: absolute;
  height: 200%;
  top: -50%;
  width: 100%;
  right: -136%;
  border-radius: 50%;
  border-left: 30px solid red;
}
.one:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0%;
  height: 50%;
  bottom: -42%;
  border-radius: 50%;
  border-top: 30px solid red;
}

/*FOR DEMO ONLY*/


.one:hover:before{border-bottom-color:blue;}
.one:hover:after{border-top-color:blue;}
.one:hover .two{background:blue;}
.one:hover .two:before{border-right-color:blue;}
.one:hover .two:after{border-left-color:blue;}
.one,.two,.one:before,.one:after,.two:before,.two:after{transition:all 0.6s;}

html {
  height: 100%;
  background: rgb(79, 79, 79);
  background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  filter: progid:...