0

I want to create the following shape:

enter image description here

I currently have the following:

enter image description here

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?

Perry
  • 62
  • 1
  • 8

1 Answers1

2

Here I have created a transparent background circle and inner colored div with absolute position, so inner div gets cropped(overflow:hidden) by the outer circle. You can always adjust the dimensions to get the different shapes around.

drop-shadow filter function creates a shadow that conforms to the shape (alpha channel) of the image itself 

.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>
Madhuri
  • 1,060
  • 5
  • 17
  • Code only answers are considered low quality. Without sufficient explaination, your answer is hard to understand. If the OP can't understand your answer, then he also wont be able to reproduce your possible solution. As such it would be worthless to him/her. Please add a sufficient explaination of your possible solution. – tacoshy Nov 10 '21 at 16:21
  • Works a treat. Thank you Madhuri. – Perry Nov 10 '21 at 16:24