I want to create the following shape:

I currently have the following:

HTML:

<div className={`${categoriesStyles.categoryCardHead} 
     ${categoriesStyles.categoryCardPink} flex content-center rounded-2xl`}>
   <div className{`${categoriesStyles.categoryCardHeadingContainer} 
       ${categoriesStyles.categoryCardHeadingPink} z-50 flex flex-wrap content-center 
       rounded-2xl`}>
   </div>
</div>

CSS:

.categoryCardHead {
  position: relative;
  height: 191px;
  z-index: 10;
}

.categoryCardHeadingContainer {
  cursor: pointer;
  border-top-right-radius: 35%;
  width: 70%;
  border-bottom-right-radius: 35%;
}

How do I get the correct curve with slight drop shadow?

CodePudding user response：

.outer {
  width: 10rem;
  height: 10rem;
  background: transparent;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(2px 0 2px #444);
}

.inner {
  width: 5rem;
  height: 5rem;
  background: #b63689;
  position: absolute;
  top: 50%;
  right:0;
  transform: translateY(-50%);
  border-radius: 5px;
}

<div class="outer">
<div class="inner">
</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>