Wrapping text inside a CSS shape

Question

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.

Answer 1

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);}




    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