Skip to content

Instantly share code, notes, and snippets.

@nextab

nextab/Schräger Farbstreifen mit nur CSS.css

Last active September 15, 2024 14:09
Show Gist options
  • Save nextab/4117637d1521be1830778f6269fcce7d to your computer and use it in GitHub Desktop.
Save nextab/4117637d1521be1830778f6269fcce7d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment