如何在方形后方放置另一形状且不遮挡内部元素？

想要创建一个左侧带有溢出三角形的自定义卡片形状，尝试用absolute和relative定位把三角形元素放在主卡片后方，但这样会遮挡主卡片上的span元素，求解决方法。

• 目标形状：带圆角的白色卡片左侧带有向外溢出的三角形，卡片右上角有定价标签
• 当前代码：

<div class="h-96 p-6 bg-white relative rounded-3xl border-3 border-white shadow-sm transition ease-in-out hover:scale-110">
    <div class="flex justify-between">
        <i class="fa-solid fa-gem text-4xl text-secondary"></i>
        <div class="absolute -top-5 right-8 flex flex-col items-center p-4 bg-blue">
            <span class="text-purewhite font-semibold text-3xl">25€</span>
            <span class="text-gray-200 font-semibold">for month</span>
        </div>
        <!-- <span class="text-3xl text-primary font-medium">Base</span> -->
    </div>
</div>

• 当前UI问题：左侧无三角形，且后方定位的元素会遮挡主卡片上的内容

1. 解决层级遮挡 #

给后方的三角形元素设置z-index: -1（Tailwind对应类z-[-1]），由于主卡片是relative定位，默认层级高于z-index为-1的元素，这样三角形会被压在主卡片内容下方，不会遮挡span等元素。

2. 实现左侧溢出三角形 #

可以用border特性绘制三角形，配合absolute定位让它溢出卡片左侧：

• 通过透明边框+有色边框的组合绘制三角形形状
• 用top: 1/2和-translate-y-1/2让三角形垂直居中
• 左移元素使其超出主卡片范围

<div class="h-96 p-6 bg-white relative rounded-3xl border-3 border-white shadow-sm transition ease-in-out hover:scale-110">
    <!-- 左侧溢出三角形 -->
    <div class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-full w-0 h-0 border-t-[50px] border-t-transparent border-b-[50px] border-b-transparent border-r-[50px] border-r-white z-[-1]"></div>
    
    <div class="flex justify-between">
        <i class="fa-solid fa-gem text-4xl text-secondary"></i>
        <div class="absolute -top-5 right-8 flex flex-col items-center p-4 bg-blue">
            <span class="text-purewhite font-semibold text-3xl">25€</span>
            <span class="text-gray-200 font-semibold">每月</span>
        </div>
        <span class="text-3xl text-primary font-medium">基础版</span>
    </div>
</div>

代码说明 #

• 三角形用独立div实现，通过border属性绘制，z-[-1]确保层级在主卡片内容之下
• 主卡片的relative定位为所有absolute元素提供定位参考
• 调整border的像素值可以改变三角形的大小

内容的提问来源于stack exchange，提问作者Džiugas Bižokas