CSS3 Exclusions

This demo shows some basic example of CSS3 exclusions application.

See this demo in Chrome with Experimental Feature enabled

Basic Shape

Lo­rem ipsum dolor sit amet, con­sectetur ad­ipis­icing elit, sed do eius­mod tem­por incidid­unt ut labore et dol­ore magna ali­qua. Ut enim ad minim veniam, quis nostrud exercita­tion ullam­co labo­ris nisi ut ali­quip ex ea com­modo conse­quat. Duis aute irure dolor in reprehend­erit in volup­tate velit es­se cil­lum dolore eu fug­iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

div {
	font-size: 12px;
	width: 300px;
	height: 300px;
	overflow: hidden;
	text-align: justify;
	-webkit-hyphens: manual;
	-webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px);
}

Complex Shape

Lo­rem i­ps­um do­lor sit amet, con­sectetur ad­ipis­icing elit, sed do eius­mod tem­por incidid­unt ut lab­ore et dol­ore magna ali­qua. Ut enim ad minim veniam, quis no­strud exercita­tion ullam­co labo­ris nisi ut ali­quip ex ea com­modo conse­quat. Duis aute iru­re dolor in reprehend­erit i­n vo­l­up­ta­te ve­lit es­se cil­lum do­lo­re e­u fug­ia­t n­ulla pari­atur. Ex­cept­eur si­nt occa­ecat cupi­dat­at non pro­ident, su­nt in cul­pa qui offi­cia dese­runt mollit anim id est la­borum. Lo­rem i­ps­um do­lor sit amet, con­sectetur ad­ipis­icing elit, sed do eius­mod tem­por incidid­unt ut lab­ore et dol­ore magna ali­qua. Ut enim ad minim veniam, quis no­strud exercita­tion ullam­co labo­ris nisi ut ali­quip ex ea com­modo conse­quat. Duis aute iru­re dolor in reprehend­erit i­n vo­l­up­ta­te ve­lit es­se cil­lum do­lo­re e­u fug­ia­t n­ulla pari­atur. Ex­cept­eur si­nt occa­ecat cupi­dat­at non pro­ident, su­nt in cul­pa qui offi­cia dese­runt mollit anim id est la­borum.

Code

div {
	font-size: 12px;
	width: 300px;
	height: 269px;
	overflow: hidden;
	text-align: justify;
	-webkit-hyphens: manual;
	-webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);
}
Fork me on GitHub