Сделайте два наклонных элемента div соприкасающимися внутри с помощью shape-outside и clip-path и оберните текст. ⇐ CSS

[Anonymous]

У меня есть следующий HTML и CSS

Код: Выделить всё

.container {
display: flex;
width: 100%;
height: 300px;
}

.left,
.right {
width: 50%;
height: 200px;
}

.left {
background-color: #4CAF50;
clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
shape-outside: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.right {
background-color: #2196F3;
shape-outside: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

Код: Выделить всё

Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl

Выглядит великолепно, но я не могу понять, как сделать внутреннюю часть края соприкасаются, а не разделяются средней белой частью. Вот что он генерирует прямо сейчас


Кроме того, я хочу, чтобы текст переносился внутри погружения, а не вырывался наружу. Заранее спасибо за любую помощь.


Подробнее здесь: https://stackoverflow.com/questions/790 ... th-and-wra