Schräger Farbstreifen mit nur CSS.css

.white-stripe {
    height: 30px;
    background-image: linear-gradient(120deg, red 0%, red 30%, white 30%, white 35%, black 5%, black 100%);
}

/* Alternative Lösung: */

.skewed_container {
    overflow: hidden;
}
.skewed_container .elementor-widget-container {
    display: flex;
    align-items: stretch;
    flex-flow: row nowrap;
    height: 30px;
    width: calc(100% + 5rem);
    margin-left: -2.5rem;
}
.skewed_container .block1, .skewed_container .block2, .skewed_container .block3 {
    transform: skewx(-20deg);
}
.skewed_container .block1 {
    background-color: #000;
    width: 30%;
}
.skewed_container .block2 {
    width: 10%;
    background-color: white;
}
.skewed_container .block3 {
    width: 60%;
    background-color: red;
}

/* HTML Struktur dazu: */
<div class="block1"></div><div class="block2"></div><div class="block3"></div>