Programmiererforum

.container { display: flex; width: 100%; height: 200px; overflow: hidden; }
.box { width: 50%; position: relative; }
.box1 { background-color: red; }
.box2 { background-color: blue; }
.divider { width: 200%; height: 200%; position: absolute; background: linear-gradient(135deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%); top: -100%; left: -100%; }



      

Ich dachte, es wäre einfach für mich. Aber nachdem ich viel versucht habe, kann ich nicht erreichen. Ich habe versucht, eine Box mit zwei verschiedenen Farben mit gleicher Größe mit zwei verschiedenen Farben zu erstellen. Aber mit einer diagonalen Linie in der Mitte. Um es klar zu machen, füge ich AB -Bild an. /p>
[code]



.container { display: flex; width: 100%; height: 200px; overflow: hidden; }
.box { width: 50%; position: relative; }
.box1 { background-color: red; }
.box2 { background-color: blue; }
.divider { width: 200%; height: 200%; position: absolute; background: linear-gradient(135deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%); top: -100%; left: -100%; }






[/code]