Shape of Paragraph Text By CSS Shape-Outside Property

Shape of paragraph text by CSS shape-outside Property

ext Shapes allow professional web designers to wrap content around custom paths, like circles, ellipses, and polygons, thus breaking free from the restriction of the wrapping the content just to a rectangle. This shapes can be defined on our own or according to the image shape used.

Here, we have discussed below few text shapes with their code and a snapshot which describes how it actually looks when implemented.

1.Circle shape:

  • For making circular shapes.
  • Property: shape-outside: circle($value);
  • circle() expects the parameters of a radius. We identified the Radius as 50%. In this context, it defines 50% of the width of 250px and the height of 250px. The value of circle() is mostly set to 50% but can be changed according to the image position required.

HTML:

Please use below HTML code:

<div class="shape-circle">
      <h2>Circle</h2>
      <img  src="image-path"  />
      <p> Informative text </p>
</div>

CSS:

.shape-circle img {
  float: left;
  width: 250px;
  height: 250px;
  padding: 10px;
  -webkit-border-radius: 1000px;
     -moz-border-radius: 1000px;
              border-radius: 1000px;
  -webkit-shape-outside: circle(50%);
     -moz-shape-outside: circle(50%);
       -ms-shape-outside: circle(50%);
              shape-outside: circle(50%);
}

Snapshot of the shape using above code:

Shape of paragraph text by CSS shape-outside Property

2. Ellipse shape:

  • For making elliptical shapes.
  • Property: shape-outside: ellipse($value);
  • ellipse() expects the parameters of radius-x, radius-y, circle-x, circle-y. Because ellipses are not perfectly round, you need two radii to be defined. One for its x-axis and the other for its y-axis. The other two parameters of circle-x and circle-y are the same as they were for the circle() function, in that they define the center point for the ellipse.

HTML:

<div class="shape-ellipse">
      <h2>Ellipse</h2>
      <img  src="image-path"  />
      <p> Informative text </p>
 </div>

CSS:

.shape-ellipse img {
   height: 300px;
   width: auto;
  -webkit-shape-outside: ellipse(70px 100px at 50% 50%);
     -moz-shape-outside: ellipse(70px 100px at 50% 50%);
              shape-outside: ellipse(70px 100px at 50% 50%);
  -webkit-clip-path: ellipse(60px 100px at 50% 50%);
     -moz-clip-path: ellipse(60px 100px at 50% 50%);
               clip-path: ellipse(60px 100px at 50% 50%);
  -webkit-shape-margin: 10px;
      -moz-shape-margin: 10px;
               shape-margin: 10px;
}

Snapshot of the shape using above code:

Shape of paragraph text by CSS shape-outside Property

3.Polygon shape:

  • For creating any shape with more than 3 vertices.
  • polygon() expects parameters of x1, y1, x2, y2, x3, y3, … Because polygons deal with more unusual shapes than circles, ellipses, and rectangles, they can accept as many x,y coordinates as you need to define the shape. So you could have a super complicated shape in the form of a tree and still be able to define the essential shape to wrap your text. Typically when defining a polygon, you need a minimum of three points or vertices to define a triangle. There is no maximum, but keeping polygons simple when all you need to do is wrap text will save you from headaches in the long run.

HTML:

<div class="shape-polygon">
      <h2>Polygon</h2>
     <img  src="image-path"  />
      <p> Informative text </p>
</div>

CSS:

.shape-polygon img {
  -webkit-shape-outside: polygon(85px 0, 0 170px, 200px 190px, 100px 115px);
     -moz-shape-outside: polygon(85px 0, 0 170px, 200px 190px, 100px 115px);
              shape-outside: polygon(85px 0, 0 170px, 200px 190px, 100px 115px);
  -webkit-clip-path: polygon(85px 0, 0 170px, 200px 190px, 100px 115px);
     -moz-clip-path: polygon(85px 0, 0 170px, 200px 190px, 100px 115px);
              clip-path: polygon(85px 0, 0 170px, 200px 190px, 100px 115px);
}

3.1 Left Polygon shape:

HTML:

<div class="shape-polygon left">
      <h2>Polygon</h2>
     <img  src="image-path"  />
      <p> Informative text </p>
 </div>

CSS:

.shape-polygon.left img {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
     -moz-shape-outside: polygon(0 0, 100% 100%, 0 100%);
              shape-outside: polygon(0 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
     -moz-clip-path: polygon(0 0, 100% 100%, 0 100%);
              clip-path: polygon(0 0, 100% 100%, 0 100%);
}

Snapshot of the shape using above code:

Shape of paragraph text by CSS shape-outside Property

3.2 Right Polygon shape:

HTML:

<div class="shape-polygon right">
      <h2>Polygon</h2>
      <img  src="image-path"  />
      <p> Informative text </p>
</div>

CSS:

.shape-polygon.right img {
  float: right;
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
     -moz-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
              shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
     -moz-clip-path: polygon(100% 0, 100% 100%, 0 100%);
              clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

Snapshot of the shape using above code:

Shape of paragraph text by CSS shape-outside Property

Hover effect with shape:

HTML:

<div class="shape-hover shape-box">
      <h2>Shape Hover effect</h2>
      <img  src="image-path"  />
      <p> Informative text </p>
</div>

CSS:

.shape-hover img {
  float: left;
  -webkit-border-radius: 1000px;
     -moz-border-radius: 1000px;
          border-radius: 1000px;
  -webkit-shape-outside: circle(30%);
     -moz-shape-outside: circle(30%);
       -ms-shape-outside: circle(30%);
              shape-outside: circle(30%);
  -webkit-clip-path: circle(30%);
     -moz-clip-path: circle(30%);
             clip-path: circle(30%);
  -webkit-transition: all 0.5s ease 0s;
     -mos-transition: all 0.5s ease 0s;
       -ms-transition: all 0.5s ease 0s;
             transition: all 0.5s ease 0s;
}

.shape-hover img:hover{
  -webkit-shape-outside: circle(50%);
     -moz-shape-outside: circle(50%);
       -ms-shape-outside: circle(50%);
             shape-outside: circle(50%);
  -webkit-clip-path: circle(50%);
     -moz-clip-path: circle(50%);
              clip-path: circle(50%);
}

Snapshot of the shape using above code:

Without hover effect:

Shape of paragraph text by CSS shape-outside Property

On Hover Effect:

Shape of paragraph text by CSS shape-outside Property

Browser support:

This browser support data is from here.

  • Text Shapes (shape-outside) is a relatively new technology that is not used in most of the websites but will undoubtedly become very popular when more browsers support it with consistency.
  • At the moment, Text Shapes (shape-outside) are limited to browsers at or later than Chrome 37, Safari 7.1, Android Browser 40, iOS Safari Browser 8 and Opera Mobile 24.
IE Edge Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Chrome for Android

Hope this blog helped you feel free to provide your vital feedbacks.