JSFiddle - React, Tailwind, and code Playground

by Niranjan Borawake

HTML

<div class="beak-top"></div>
<div class="parallelogram"></div>
<div class="face"></div>

CSS

div {
  border: 2px solid black;
}
.beak-top {
  width: 100px;
  height: 10px;
  border: 2px solid #000;
  
  border-right: transparent;
  border-bottom: transparent;
  border-top-left-radius: 500px 150px;
  
}

.face {
  width: 100px;
  height: 100px;
  border-radius: 50px/ 150px,  20px / 20px;

}