React+Tailwind CSS如何在矩形父容器左右添加垂直居中的圆形凹口

调整方案 #

你当前的实现主要存在两个问题：父级使用的drop-shadow会给绝对定位的圆形子元素也加上投影，和内阴影的方向不符合设计稿的凹陷效果，按以下步骤修改即可：

1. 替换父容器的阴影属性：将父div上的filter drop-shadow-xl替换为shadow-xl，普通盒阴影不会作用到绝对定位的子元素上，避免圆形额外带投影。
2. 调整两侧圆形的内阴影：默认的shadow-inner是四周内阴影，改为仅朝向父容器的单侧内阴影，更贴合设计稿的缺口凹陷效果。
3. 确认圆形背景色和页面整体背景色完全一致，保证缺口的真实感。

修改后的完整代码如下：

import React from 'react'

const Offer = () => {
    return (
      <>
        <div className="sm:py-6 py-4 flex flex-row items-center justify-evenly sm:px-12 px-6 m-4 my-6 bg-white rounded-md relative shadow-xl">
          <div className="flex flex-row w-full items-center divide-x-2 divide-dashed divide-gray-400">
            <div className="flex-none sm:pr-8 mr-2">
              <svg
                className="w-12 h-12 flex-none"
                fill="#3BB44B"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="flex flex-auto flex-col text-center space-y-2 pl-1">
              <h3 className="font-semibold">BUT 1 GET 1 FREE</h3>
              <p className="text-sm break-words">
                Buy one and get one free when your order value exceeds
              </p>
              <span className="text-sm text-yellow-500 font-medium">
                SHOW MORE
              </span>
            </div>
          </div>
          <span className="w-10 h-10 absolute bg-gray-100 -right-5 transform -translate-y-2/4 top-2/4 rounded-full shadow-[inset_2px_0_4px_rgba(0,0,0,0.1)]"></span>
          <span className="w-10 h-10 absolute bg-gray-100 -left-5 shadow-[inset_-2px_0_4px_rgba(0,0,0,0.1)] transform -translate-y-2/4 top-2/4 rounded-full"></span>
        </div>
      </>
    );
}

export default Offer

如果你的页面背景色不是bg-gray-100，把两个span的背景色替换成对应页面背景色即可。

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