html - 如何在 html 和 css 中重新创建这个形状？

Question

我想创建以下形状：

我目前有以下内容：

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%;
}

如何获得带有轻微阴影的正确曲线？

标签： htmlcss

Answer 1

在这里，我创建了一个透明的背景圆和具有绝对位置的内部彩色 div，因此内部 div 被外圆裁剪（溢出：隐藏）。您始终可以调整尺寸以获得不同的形状。

阴影滤镜功能创建符合图像本身形状（alpha通道）的阴影

.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>