Страницы

Поиск по вопросам

четверг, 20 июня 2019 г.

Обтекание текста под углом


Как сделать такое обтекание текста под углом?


Ответ

https://css-tricks.com/almanac/properties/s/shape-outside/
.block{ overflow: hidden; margin: 10px; padding: 15px; } .pict{ float:left; width:100px; height:150px; margin:10px; background-color: #ccc; -webkit-shape-outside: polygon(100% 50%, 0 0, 0 100%); shape-outside: polygon(100% 50%, 0 0, 0 100%); -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); clip-path: polygon(100% 50%, 0 0, 0 100%); -webkit-shape-margin: 10px; shape-margin: 10px; }

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

или
.block{ overflow: hidden; margin: 10px; padding: 15px; } .pict{ float:left; width:100px; height:150px; margin:10px; background-color: #ccc; -webkit-shape-outside: polygon(0 0, 100% 50%, 100% 100%, 0% 100%); shape-outside: polygon(0 0, 100% 50%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 50%, 100% 100%, 0% 100%); -webkit-shape-margin: 10px; shape-margin: 10px; }
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Комментариев нет:

Отправить комментарий