如何将另一种自定义位置 colored颜色添加到三角形CSS中

发布于01月02日

How to add the green bar inside the triangle just like this photo ?

我试着添加一个三角形的css，但我不知道如何将绿色条写入三角形css.

Css文件:

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

布局代码:

<div className={styles.triangle} />

推荐答案

如果你正在寻找css解决方案，你也许能够在这里try 多个三角形，并得到想要的结果.

大概是这样的:

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 210px 100vw;
    border-color: transparent transparent #1a202c;
}

.triangle::before {
    position: relative;
    left: -50vw;
    top: -19px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 105px 50vw;
    border-color: transparent transparent #83e5da;
}


.triangle::after {
    position: relative;
    left: -100vw;
    top: -16px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 105px 50vw;
    border-color: transparent transparent #1a202c;
}