CSS SHapes

by danield770

HTML

<div class="shape">

     With CSS Exclusions and Shapes content inside of an element can wrap around a custom shape defined with the <var>shape-inside</var> property. The element is still bound by a rectangular shape, but its content respects the custom shape. The value of this property can be one of the follwing shape functions: <var>rectangle()</var>, <var>circle()</var>, <var>ellipse()</var>, and <var>polygon()</var>.
     Use <var>rectangle()</var> to get a rectangular shape with straight or rounded corners. The <var>circle()</var> function gets you a circular shape by setting the coordinates for its center and a value for the radius. With <var>ellipse()</var> you get a squished circle and <var>polygon()</var> lets you define complex shapes. Dimensions can be defined as either absolute or relative values: px, em, rem, % and so forth.Dimensions can be defin
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}