Wrapping text inside a CSS shape

Question

I've searched a lot on the internet and couldn't find any solution on my problem. 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?

Answer 1

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

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 2

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>