CSS Shapes
Gridlayoutisn'ttheonlylayout-relatedspecificationthat'scomingsoontobrowsers.
CSSShapes^4 willenabledeveloperstoflowcontentintoandaroundcomplex,non-
rectangularshapes.
Let'slookatasimpleexampleusingafloatedelementandsomeaccompanying
text.First,ourmarkup.
<div shape="shape"></div>
<p class="content">Integer venenatis, nisi sed congue ...</p>Andwe'llusethefollowingCSS:
.content {
width: 600px;
}
.shape {
background: purple;
shape-outside: polygon(0 0, 100% 40%, 100% 100%, 80% 100%);
clip-path: polygon(0 0, 100% 40%, 100% 100%, 80% 100%);
float: left;
width: 300px;
height: 300px;
margin: 20px;
}Theshape-outsidepropertydetermineshowotherelementsinthedocumentwill
flowaround.shape.Inordertomakeelementstoactuallyflow,we'veaddedfloat:
left,asshowninFigure10.2.
(^4) http://www.w3.org/TR/css-shapes/
Conclusion 355