Wrapping text inside a CSS shape

I would like to justify/wrap my text inside a triangle to follow its border shape. I've made an example using a parallelogram, but the result isn't satisfying.

.parallelogram { 
    width: 200px; 
    padding: 20px; 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    transform: skew(-30deg);
    background: #ccc;
    margin: 80px;
}

.parallelogram .text {
    width: 200px;
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    margin: 20px;
}

http://jsfiddle.net/HarrysNature/noqa6qLc/3/

Any idea?

Answers:

Answer

You can align the text to an oblique line by using shape-outside in combination with float.

preview

How it works

  • create a new element <div class="shape"></div> before your text
  • create a thin parallelogram shape out of it with

    shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
    
  • Let it float: left to make the text align to the right border of the shape
  • adjust its height and width according to the angle of your transform: skew()

The good: Due to the polygon() method, you can create whatever shape you like and let text float around it. You can even make it responsive by setting relative units to its width and height.

The bad: Won't work in IE/Edge, see browser compatibility on caniuse and MDN.

For demonstration purposes, I added a background a clip-path to the shape, to see how it actually works. Of course you can remove those 3 rules:

.shape {
  width: 50px;
  height: 80px;
  -webkit-shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  shape-outside: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  float: left;
  /* the following three lines are only for demonstration purposes */
  background: #444;
  -webkit-clip-path: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
  clip-path: polygon(90% 0, 100% 0, 10% 100%, 0 100%);
}

.parallelogram {
  width: 300px;
  padding: 20px 20px 20px 0;
  -webkit-transform: skew(-30deg);
  -moz-transform: skew(-30deg);
  transform: skew(-30deg);
  background: #ccc;
  margin: 20px auto;
}

.parallelogram .text {
  width: 300px;
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  transform: skew(30deg);
}
<div class="parallelogram">
  <div class="text">
    <div class="shape"></div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

Answer

You can split text on line and wrap each to div:

.parallelogram { 
width: 230px; 
padding: 20px; 
-webkit-transform: skew(-30deg); 
-moz-transform: skew(-30deg); 
transform: skew(-30deg);
background: #ccc;
margin: 80px;}

.parallelogram .text {
width: 220px;
-webkit-transform: skew(30deg); 
-moz-transform: skew(30deg); 
transform: skew(30deg);}


<div class="parallelogram">
<div class="text">
    text text text text text text text text
</div>
<div class="text">
    text text text text text text text text
</div>
<div class="text">
    text text text text text text text text
</div>
<div class="text">
    text text text text text text text text
</div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.