Flowing content with CSS Exclusions: Shape Inside

With CSS Exclusions, you can set an element's content area to be an arbitrary shape using shape-inside.

#rectangle {
    shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
}
#hexagon {
    shape-inside: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu.
Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Vi­va­mus ac nul­la ac nunc ves­ti­b­u­lum sod­ales sed eget pu­rus. In­te­ger tris­tique neque at urna eleif­end por­ta. Mau­ris a sa­pi­en augue, ve­hic­u­la rutrum augue. Sus­pend­isse pre­tium pulvi­nar tris­tique. Nul­la el­e­men­tum blan­dit mas­sa, pel­len­tesque el­e­men­tum orci tem­pus sed. Cur­a­bi­tur eget est neque, nec pel­len­tesque enim. Sed blan­dit do­lor et neque tin­ci­dunt rutrum. Lo­rem ip­sum do­lor sit amet, con­sec­te­tur ad­ipisc­ing elit. Nul­lam tin­ci­dunt do­lor vel neque eleif­end frin­g­il­la. Prae­sent et orci nec jus­to vulpu­tate ul­tri­c­ies ac in leo. In nec ip­sum enim. Donec sus­cip­it plac­er­at ad­ipisc­ing. Nul­la a nunc mi. Sed ve­hic­u­la sus­cip­it mag­na sed con­val­lis. Donec ul­trices con­se­quat tor­tor, at fer­men­tum augue mal­esua­da in. Ut cur­sus, odio non port­ti­tor var­i­us, dui neque luc­tus la­cus, in rhon­cus dui odio eges­tas libe­ro. Mae­ce­nas po­s­u­ere con­sec­te­tur lec­tus, vi­tae con­sec­te­tur lig­u­la con­sec­te­tur eu.

Unless otherwise noted, code and content is licensed under a Creative Commons Attribution 3.0 Unported License.