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-flip
.triangle.point-right
.triangle.point-left
.triangle.incline
.triangle.decline
.triangle.incline-flip
.triangle.decline-flip
.rhombus.outside-l
.rhombus
.rhombus.outside-r
.pentagon.outside-l
.pentagon
.pentagon.outside-r
.hexagon.outside-l
.hexagon
.hexagon.outside-r
.heptagon.outside-l
.heptagon
.heptagon.outside-r
.octagon.outside-l
.octagon
.octagon.outside-r
.nonagon.outside-l
.nonagon
.nonagon.outside-r
.chevron-right
.chevron-left
.point-right
.point-left
.arrowhead-right
.arrowhead-left
.star
.bolt
.parallelogram
.home
.frame
.fat-frame
.message
.diamond
.heart
.hourglass
.bowtie
.plus
.rabbet
.cross
.cliff-right
.cliff-left
.cave-right
.cave-left
.flower
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:
The Shape-Inside Problem
Shapes use the shape-outline and clip-path CSS properties to define the path of a shape. However, this only works for wrapping content on the outside of an element, "clipping" any content that is placed within a shape element. The shape-inside property does not readily exist, so we need to mimick it. In the example below, we see how the shape clips the text.
Twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
The Solution: Mold-Shapes
In order to make content wrap within a shape element, we need to define a shape-outside path and float them left and / or right within a shape element (most are 50% of the width of the shape container). Enter Mold-Shapes! We can "mold" content within a shape to wrap within it. The example below demonstrates this solution.
Twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
A mold-shape allows us to make content "fluid" within a shape without it being clipped. We'll need to float a left and right outside shape on either side of the content, wrapped within a shape container:
<div class="mold-shape SHAPE"><div class="shape">
<div class="shape-left"></div>
<div class="shape-right"></div>
...CONTENT...
</div></div>
Where SHAPE is the name of the class (i.e. hexagon).
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
writhen: twisted or contorted out of normal shape or form; having spirally twisted ornamentation.
Let's look at some custom shape-inside examples. We'll float some shapes to the left and right of basic content within standard boxes.
CAMPFIRE BOX 1
In this example, we have two fire rhombus outside-l and outside-r shapes floated on the left and right, respectively, and set to 33% of the width of the box. This paragraph is padded, giving some space between the text and floated shapes.
CAMPFIRE BOX 2
This box has two shapes at 33% width each. On the right is a heptagon outside-l shape, and on the right is a triangle decline-flip shape.
MIDNIGHT BOX 1
In this example, we have a fire point-right triangle floated left (set to 25% width), and a hexagon outside-r floated right (set to 50% width).
MIDNIGHT BOX 2
This box has a cliff-left shape floated left with 25% width and 2rem right margin, and a nonagon outside-r shape floated right with 50% width.
FLOWER POWER
I am a circle mold-shape centered within a nested flower shape.