Shapes 1

:^)

This uses clip-path which chops off the text unfortunately.

Clip path can make lots of different shapes especially for cropping images or creating shapes. There is also shape-outside.

Cing elit. Praesentium quaerat repellat repudiandae nihil hic aliquam aut excepturi dolores quasi! A odio ea commodi! Amet voluptates, deserunt magni excepturi culpa ad mollitia, odit error cum facilis accusamus accusantium alias quaerat a consequuntur pariatur? Suscipit sunt assumenda asperiores nulla perspiciatis deserunt, aliquam eveniet enim dicta corrupti at explicabo minima sapiente odit, tenetur fugit voluptatum cumque repellat est, mollitia quasi cum rerum accusantium magni. Tempora porro at magnam dolore nesciunt recusandae?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quaerat repellat repudiandae nihil hic aliquam aut excepturi dolores quasi! A odio ea commodi! Amet voluptates, deserunt magni excepturi culpa ad mollitia, odit error cum facilis accusamus accusantium alias quaerat a consequuntur pariatur? Suscipit sunt assumenda asperiores nulla perspiciatis deserunt, aliquam eveniet enim dicta corrupti at explicabo minima sapiente odit, tenetur fugit voluptatum cumque repellat est, mollitia quasi cum rerum accusantium magni. Tempora porro at magnam dolore nesciunt recusandae?

This uses transform: skew() with paragraph having positive and then negative values. Amet consectetur adipisicing elit. Praesentium quaerat repellat repudiandae nihil hic aliquam aut excepturi dolores quasi! A odio ea commodi! Amet voluptates, deserunt magni excepturi culpa ad mollitia, odit error cum facilis accusamus accusantium alias quaerat a consequuntur pariatur? Suscipit sunt assumenda asperiores nulla perspiciatis deserunt, aliquam eveniet enim dicta corrupti at explicabo minima sapiente odit, tenetur fugit voluptatum cumque repellat est, mollitia quasi cum rerum accusantium magni. Tempora porro at magnam dolore nesciunt recusandae?

Section 5. Shape-outside. This uses two divs, one floated left and the other floated right. Both use the shape-outside property which uses different settings to create triangle shapes. One difficulty is setting the height. Using 100% does not work so set to 70vh which is the min-height of section container.

Another problem is that when using the clip-path on the second, righthand div it disappears from view completely. This goes away when columns are turned off. A bug in firefox perhaps? It does not happen in Brave.

On a positve not all the browsers support this shape-outside property. It's interesting but much harder than using a page layout program like Illustrator to create patsh. Also there doesn't seem a way to use shapes to contain text. Rather it chops off the text if you use clip-path. Maybe there are other properties to use? Laceat, deleniti porro ex, aperiam itaque vel fuga eaque mollitia ad dignissimos maxime. Inventore laborum tenetur adipisci cumque culpa? Fuga eaque recusandae voluptatum perferendis voluptatibus necessitatibus labore sint suscipit quod vero mollitia accusamus, aliquid nostrum sequi esse, ducimus atque aliquam hic.

Consequatur amet, maxime ratione maiores quas, dolorem saepe vel obcaecati temporibus nulla facilis, eligendi ab dolor odio neque officia. Recusandae, tempora sequi ratione dolore temporibus repellendus asperiores omnis, sunt dolores veniam soluta tempore ea assumenda voluptate laborum placeat natus doloremque nobis inventore et maiores porro!

Although this has hyphens: auto; the text is being hyphenated. It could be because the words are latin hence I'm writing some English here to see if it changes anything. Dignissimos maxime. Inventore laborum tenetur adipisci cumque culpa? Fuga eaque recusandae voluptatum perferendis voluptatibus necessitatibus labore sint suscipit quod vero mollitia accusamus, aliquid nostrum sequi esse, ducimus atque aliquam hic.

Links