.footer-strip {
    width: 100%;
    height: 80px;
    display: flex;
    overflow: hidden;
    background: #0c0f1a;   /* footer background */
}

.diamond {
    position: relative;
    width: 140px;    /* width of 1 color block */
    height: 80px;   /* height of triangles */
}

/* Left triangle (DOWN) */
.diamond::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;

    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 120px solid var(--c1);
}

/* Right triangle (UP) */
.diamond::after {
    content: "";
    position: absolute;
    left: 70px;
    width: 0;
    height: 0;

    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 120px solid var(--c2);
}