CSS倒三角形+状态样式继承实现

关键逻辑说明

• 继承实现：通过CSS变量--bg-color在状态类（.pass/.error）中定义颜色，父容器（.status-box）继承该变量，伪元素（::after）再通过border-top-color: var(--bg-color)复用颜色，实现三角形与父容器状态同步。

• 倒三角原理：利用CSS边框特性，将三边设为透明，仅保留上边框，配合绝对定位在父容器底部，形成向下的倒三角形。

• 定位：父容器必须设position: relative，否则三角形会相对于页面根元素定位。

• 兼容性：兼容所有现代浏览器及小程序，变量语法在低版本浏览器（如IE）不支持，若需兼容可替换为固定颜色（需为不同状态单独写三角形样式）。

• .triangle-down { width: 0px; height: 0px; border: 10px solid var(--bg-color); border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; transform: rotate(0deg); position: absolute; left: 50%; top: 100%; bottom: -12rpx; transform: translateX(-50%); z-index: 1; }

  // 合格状态样式 .pass { --bg-color: rgba(105, 195, 56, 0.1); background: var(--bg-color); color: #69C338; } // 不合格状态样式 .error { --bg-color: #FEF6F0; background-color: var(--bg-color); color: #F25700; }