這個問題在這里已經有了答案：
![如何在 html 和 css 中重新創建這個形狀？[復制]](https://img.uj5u.com/2021/11/11/a543e187a14445279b743f0405fd4f18.png)
我目前有以下幾點：
![如何在 html 和 css 中重新創建這個形狀？[復制]](https://img.uj5u.com/2021/11/11/11c73a3fc05c496692d8a9c960589d14.png)
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%;
}
如何獲得帶有輕微陰影的正確曲線？
uj5u.com熱心網友回復：
在這里，我創建了一個透明背景圓和具有絕對位置的內部彩色 div，因此內部 div 被外圓裁剪（溢位：隱藏）。您可以隨時調整尺寸以獲得不同的形狀。
drop-shadow濾鏡功能創建符合影像本身形狀（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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355516.html
下一篇：CSS-行內SVG會干擾行高？