How to put paragraph inside css polygon

Question

I was able to successfully use shape-outside: polygon(...) and clip-path: polygon(...) to create the desired polygon shape.

I saw a lot of pages linking to using shape-inside , and yet I read that shape-inside outdated and has no replacement. They were also written in 2014, so I hope CSS3 changes from then on.

After browsing the internet, I was able to put together something that almost works. I like the shape, but now I need a text wrapper inside the shape with hidden overflow.

I have seen the hints about ::before , but I still don't understand how this will help. Testing did not show any results.

Is it simple or complex, how can I use CSS to wrap text inside a polygon? Or is the solution outside CSS? Do I need to use a different approach like jQuery?

CSS

 /* For reference: @vertex1: 120px; @vertex2: @vertex1*2; */ .diamondContainer { display: block; position: absolute; text-align: center; width: @vertex2; height: @vertex2; overflow: hidden; /* hide anything longer than allowed string length */ /* This is a diamond shape */ shape-outside: polygon(@vertex1 0, @vertex2 @vertex1, @vertex1 @vertex2, 0 @vertex1); clip-path: polygon(@vertex1 0, @vertex2 @vertex1, @vertex1 @vertex2, 0 @vertex1); } 

HTML

 <div class="diamondOuter"> <div class="diamondWrapper"> <div class="diamondContainer diamondCell2"> <span><strong>Title Text</strong><br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</span> </div> </div> </div> 

Answer 1

Look again at shape-outside .

You do not set it in a text container, but other elements around the text.

In your case, you may need at least 2 div to stream text.

This page has an example of text flowing between 2 polygon .

https://www.html5rocks.com/en/tutorials/shapes/getting-started/

Hope this helps.