求助：如何用CSS实现底部带三角形的矩形？已尝试:after伪元素

我需要制作一个底部带三角形的矩形表单，尝试用:after伪元素实现，但没达到预期效果，恳请各位帮忙。预期效果为矩形底部中间带有一个向下的三角形，与主体视觉连贯且带有阴影。

以下是我当前的代码：

HTML代码 #

<div class="login-card">
</div>

CSS代码 #

.login-card{
     position: absolute;
width: 394px;
height: 682px;
left: calc(50% - 394px/2);
top: 64px;

/* surface */
background: #FFFFFF;
/* 04 dp */
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.login-card:after {
    content: "";
    position: absolute;
    top: 100%;
    
    width: 60px;
    height: 0;
    border-style: solid;
    border-width: 86px 197px 0 197px;
    border-color: red transparent transparent transparent;
    
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
 }

修正方案 #

你当前的伪元素写法存在两个核心问题：一是边框尺寸设置错误，导致三角形宽度和主体一致，无法形成底部中间的小三角；二是直接给伪元素加box-shadow会和主体阴影冲突，视觉不连贯。调整后的代码如下：

.login-card{
    position: absolute;
    width: 394px;
    height: 682px;
    left: calc(50% - 394px/2);
    top: 64px;
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.login-card:after {
    content: "";
    position: absolute;
    /* 定位到底部中间 */
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    /* 制作等腰三角形：左右边框透明，上边框为主体背景色 */
    border-width: 30px 30px 0 30px;
    border-style: solid;
    border-color: #FFFFFF transparent transparent transparent;
    /* 用drop-shadow跟随三角形轮廓加阴影，替代box-shadow */
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) 
            drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12)) 
            drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
}

关键调整说明 #

• 定位优化：通过bottom: -30px让三角形紧贴主体底部，left:50% + transform: translateX(-50%)实现水平居中
• 三角形尺寸：border-width:30px 30px 0 30px生成底宽60px、高30px的等腰三角形，可根据需求调整数值
• 阴影处理：使用filter: drop-shadow替代box-shadow，阴影会跟随三角形的轮廓生成，避免边框盒子的多余阴影
• 颜色匹配：三角形边框色与主体背景色一致，保证视觉上的连贯感

内容的提问来源于stack exchange，提问作者Juan David Lara