如何使用HTML与CSS实现带轻微投影的指定曲线异形形状

调整方案 #

你只需要修改categoryCardHeadingContainer的圆角规则，新增阴影属性即可，具体修改如下： #

1. 修改后的CSS代码

.categoryCardHead {
  position: relative;
  height: 191px;
  z-index: 10;
  overflow: hidden; /* 可选，避免内层元素超出外层圆角 */
}

.categoryCardHeadingContainer {
  cursor: pointer;
  /* 用固定值定义水平/垂直圆角，替换原百分比圆角，弧度更贴合目标效果 */
  border-top-right-radius: 90px 191px;
  border-bottom-right-radius: 90px 191px;
  width: 70%;
  height: 100%; /* 补充高度，和外层容器一致 */
  /* 适配不规则形状的投影，比box-shadow更贴合弧形边缘 */
  filter: drop-shadow(2px 0 8px rgba(0,0,0,0.15));
}

2. 调整HTML冗余属性

删掉内层div的rounded-2xl类，避免默认圆角覆盖自定义的弧度效果：

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

修改说明

• 原百分比圆角会根据元素宽高同时缩放，弧度太圆不符合需求，换成「水平半径+垂直半径」的写法可以精准控制弧形的平缓程度，你可以根据实际效果微调90px的数值，数值越小弧度越陡，越大越平缓。
• 用drop-shadow可以完美贴合弧形边缘生成投影，参数依次是「水平偏移 垂直偏移 模糊半径 颜色」，可以根据视觉需求调整数值。

内容的提问来源于stack exchange，提问作者Perry