CSS SHapes

by danield770

HTML

<div class="page">
  <h1>
    Shape Inside - Custom shape
  </h1>
  <div class="shape" contenteditable="true">
    <p>
     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
    </p>
  </div>
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  width: 400px;
  height: 400px;
  text-align: justify;
  margin: 0 auto;
}

body{
  text-align: center;
  width: 70%;
  margin: 5% auto;
  padding: 50px;
  min-width: 500px;
}