JSFiddle - React, Tailwind, and code Playground

by jessikwa

HTML

<div class="outer">
    <div class="tip"></div>
    <div class="circle"></div>
</div>

CSS

.outer, .outer * {
	margin: 0;
	padding: 0;
}
.outer {
	background: white;
  	position: relative;
  	display: block;
  	width: 300px;
  	height: 300px;
  	margin: 0 auto;
}
.circle {

	background-color: #ffba15;
	height: 300px;
	width: 300px;
	border-radius: 100%;
	position: absolute;
	top: 62px;
	z-index: 1;
}
.tip {
   width: 0; 
   height: 0; 
   z-index: 2;
   position: absolute;
   left: -75px;
   border-bottom: 190px solid #ffba15; 
   border-left: 80px solid transparent; 
   border-right: 75px solid transparent; 
   -ms-transform: rotate(-65deg); 
   -webkit-transform: rotate(-65deg);
   transform: rotate(-65deg);
}