如何在CSS绘制的三角形内添加自定义绿色条形区域？

你可以通过伪元素+变换/裁剪的方式，在现有三角形内部添加绿色条形，无需修改HTML结构。下面提供两种可行方案：

方案一：基于原border结构扩展 #

保留你现有的border实现方式，通过伪元素生成绿色条形，再用transform调整角度贴合三角形斜边：

.triangle {
    position: relative; /* 让伪元素相对自身定位 */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

.triangle::before {
    content: '';
    position: absolute;
    /* 定位到三角形内部，可根据需求调整top/left值 */
    top: 20px;
    left: 20px;
    /* 设置条形尺寸 */
    width: calc(100vw - 40px);
    height: 30px;
    background-color: #22c55e; /* 绿色，可自行调整色值 */
    /* 倾斜角度匹配三角形斜边：角度由三角形的宽高比决定，这里用近似值，可根据实际效果微调 */
    transform: skewY(-6deg);
}

方案二：用clip-path重构（更灵活） #

改用clip-path绘制三角形，同时给伪元素添加裁剪路径，让绿色条形完美贴合三角形斜边，适配不同屏幕宽度：

.triangle {
    position: relative;
    width: 100vw;
    height: 210px;
    /* 用clip-path绘制原三角形形状 */
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    background-color: #1a202c;
}

.triangle::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100vw - 60px);
    height: 30px;
    background-color: #22c55e;
    /* 裁剪出贴合三角形斜边的梯形，比例和主三角形一致 */
    clip-path: polygon(0 0, 100% 0, calc(100% - (100vw * 30) / 210) 100%, 0 100%);
}

说明 #

• 两种方案都无需修改你的HTML结构，直接在现有.triangle类上扩展即可。
• 调整top/left可改变绿色条形的位置，修改height可调整条形粗细，色值也可按需替换。
• 方案二的clip-path计算逻辑：根据三角形宽高比（100vw:210px），让条形右侧的倾斜角度和主三角形斜边完全一致，适配所有屏幕尺寸。

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