One place for hosting & domains

      MagazineStyle

      Magazine-Style Shapes Around Floated Elements in CSS With shape-outside


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      Introduction

      Part of CSS Shapes module 1, shape-outside is an interesting property that makes it easy to set a shape for the wrapping of text around a floated element. For example, if a floated element is an image with a lot of white-space or if it has a different border radius, the value of shape-outside comes into play to define how text around it will wrap.

      Using shape-outside allows to create page layouts that approach those that we’re used to see in magazines. It can be a nice progressive enhancement for supporting browsers and in non-supporting browsers the property is simply ignored.

      The value for shape-outside can be a keyword, a shape function or an URL to an image. Let’s explore each option briefly:

      Shape Keywords

      You can set shape-outside to a value like margin-box, padding-box, content-box or border-box. This makes it easy to have text that follows the border radius value applied to the floated element:

      Shape outside margin-box

      margin-box
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus euismod tempor. Ut ac condimentum neque. Vivamus vel tristique lacus. Aenean volutpat volutpat diam, eu volutpat mauris. Donec interdum tempor risus. Maecenas eu tincidunt tortor. Donec tincidunt turpis enim, ac bibendum lorem blandit at. Pellentesque ullamcorper ex sit amet mauris dictum varius.

      img.shape1 {
        float: left;
        margin-right: 2rem;
        border-radius: 0% 90%;
        -webkit-shape-outside: margin-box;
        shape-outside: margin-box;
      }
      

      The difference between the margin, padding, content and border keywords is in where the browser sets the “boundary” of the shape. For example, setting border-box will force text to flow exactly around the outside edge of the border of the element.

      Shape Functions

      shape-outside can also take one of four possible shape functions: circle(), polygon(), ellipse() or inset().

      Circle

      Here’s an example with an image that’s floated to the left and that has a border-radius of 50%:

      Shape outside circle

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu nec lacus venenatis pulvinar. Cras lacinia turpis diam, at euismod velit auctor sed. Curabitur bibendum sodales tortor et lobortis. Cras vitae vulputate ex. Vivamus in faucibus mi. Aliquam auctor sem ac lobortis volutpat. Integer fringilla lacus suscipit nisl blandit, sed efficitur elit ultricies. Curabitur ac laoreet ligula. Nullam et enim ut risus commodo tempor. Vivamus dictum sit amet erat vitae dapibus.

      img.shape2 {
        float: left;
        margin-right: 2rem;
        border-radius: 50%;
        -webkit-shape-outside: circle();
        shape-outside: circle();
      }
      

      The circle() shape function can also take a radius and a position value:

      /* Circle width a 40% radius and positioned at 20% 60% */
      shape-outside: circle(40% at 20% 60%);
      

      Ellipse

      In the case of the ellipse() shape function, the syntax is similar to circle’s, except that a X-radius and Y-radius is provided:

      Shape outside ellipse

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.

      .shape3 {
        float: right;
        width: 230px;
        height: 140px;
        margin-left: 2rem;
        border-radius: 50%;
        -webkit-shape-outside: ellipse(100px 55px at 38.7% 52.25%);
        shape-outside: ellipse(100px 55px at 38.7% 52.25%);
        object-fit: cover;
      }
      

      Here we also used object-fit to ensure that the image keeps its aspect ratio even though we squished the dimensions.


      Polygon

      You can create all kinds of interesting shapes using the polygon() color function. It’s quite complicated to figure out the proper dimmensions however, so for more complex shapes you’ll probably want to use a tool like this great CSS Shapes Editor Chrome Extension.

      Shape outside polygon

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.

      img.shape4 {
        float: left;
        -webkit-shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
        shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);
        -webkit-shape-margin: .7rem;
        shape-margin: .7rem;
      }
      

      Here notice the use of the shape-margin property, to nudge the whole shape slightly.


      Inset

      With the inset() shape function, you proved inset values for the top, right, bottom and left positions:

      Shape outside inset

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.

      img.shape5 {
        float: right;
        -webkit-shape-outside: inset(50px 0 50px 55px);
        shape-outside: inset(50px 0 50px 55px);
      }
      

      URL

      We can provide an image via an URL, and the opaque parts of the image with create the shape:

      Shape outside URL

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque nec dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin molestie, risus eu interdum bibendum, mauris urna laoreet nisi, in eleifend eros arcu in elit. Donec imperdiet dignissim erat et semper. Maecenas vestibulum tempor neque id pellentesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec condimentum odio eu ex pretium facilisis. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu in convallis molestie. Maecenas vehicula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.

      img.shape6 {
        float: left;
        shape-outside: url("/shape.png");
      }
      

      Here’s what our transparent png (shape.png) image looks like:

      Shape image

      Browser Compatibility: As of 2020, 94% of browsers worldwide support the shape-outside property. The only browser that is completely lacking support is Internet Explorer 11.



      Source link