В CSS и HTML я пытаюсь создать две коробки рядом с двумя разными цветами без зазора, но с уклоном в центре ⇐ CSS

[Anonymous]

Я подумал, мне было бы легко. Но после того, как я много пытаюсь достичь. Пытались создать коробку с двумя разными цветами рядом с одинаковым размером. Но с диагональной линией в центре. Чтобы прояснить, я прикрепляю AB -изображение.
Введите описание изображения здесь < /p>
Я попробовал это, но оно дает только две коробки с наклонной черной линией в центре. /p>




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








Подробнее здесь: https://stackoverflow.com/questions/793 ... wo-differe