In CSS und HTML versuche ich, zwei Boxen nebeneinander mit zwei verschiedenen Farben ohne Lücke, aber mit einer Schräge ⇐ HTML

[Guest]

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: Select all

.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%; }