html - Best practice for a triangular web design? -

html - Best practice for a triangular web design? -

i seeking best method create triangular web page design such below:

in such case text within triangles has wrapped, triangles indent text, , triangles can have backgrounds..

using css (border trick) create triangle seem work, fails when trying set background it.

using images (e.g. svg) background div, , specifying widths of paragraphs within seem triangular (example), has b bad impacts on browser compatibility , bad when comes responsiveness.

using css3 , creating skewed divs seems alternative (example), might bit heavy alternative , isn't supported in browser (all new browsers still)

transform-origin: 100% 0; transform: skewx(-55.98deg);

you looking this: http://webplatform.adobe.com/shapes/ . still experimental believe , wont find back upwards ie10 , below.

html css css3