Any element can be a shape. These are clipped elements that can also have content wrapped around them when floated left or right. Shape elements must have the class .shape applied, as well as their shape class, like so:
.shape.shape-class
.quadrant.top-left
.quadrant.top-right
.quadrant.bottom-left
.quadrant.bottom-right
.semicircle.north
.semicircle.south
.semicircle.east
.semicircle.west
.triangle
.triangle.incline
.triangle.decline
.pentagon
.hexagon
.heptagon
.octagon
.chevron-right
.chevron-left
.point-right
.point-left
.star
.rhombus
.parallelogram
.home
.frame
.fat-frame
.message
.diamond
.heart
.rabbet
.cliff-right
.cliff-left
Content can be wrapped around any shape. To do this, the shape element must be floated either left or right.
PLUSHY
Semicircle
See how this text wraps around the floated shape elements.
Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset. At nec ceteros mentitum, ex solum putent offendit per.
Mei autem disputando cu, usu porro democritum te. Vide propriae petentium mea eu, ea mea dicta nihil. Usu quas lucilius an, at mea malis debet civibus. Ullum nihil nostrum vix in, ad epicuri recteque temporibus mel, ceteros fastidii phaedrum qui an. Eu vis graeco tibique fierent, ei agam malis iracundia eum. Semper consectetuer te has, ad dolore virtute mea.
Ad wisi efficiantur his. Ea scripta gloriatur pri, et graecis docendi explicari nec. At his adhuc reque, qui at doming reformidans, porro complectitur per ex. Vis at maluisset reprimique.
Errem suscipiantur cu eos, vidit accusam sea no. Id sea labore accumsan nominavi. No facer nobis pro, ex mei nostrud interesset. Prompta imperdiet ei eam, quo nobis persius eloquentiam ne, assum dissentias liberavisse nec eu. Vim epicuri singulis ut.
Unfortunately, it's not possible to apply borders directly to shapes. This is because shapes are "clipped" elements, so only portions of a border may appear, as in the example below:
However... there is a workaround for this. To get a solid border / outline to surround a shape element, we'll need to nest it within another shape element that is slightly larger. For example, we would like a 200 x 200 px hexagon to have a red border that is 10px thick. Our outer hexagon will need to be 220 x 220. For perfect centering, we can apply a padding-top of 10px to the outer shape (or, we could use flexbox to middle-align it). The result should be: