I was able to generate the shape I want using css (using borders), but I’d know like to map a background on it. I tried a few solutions but I didn’t found anything working in CSS.
You’ll find an example there: http://codepen.io/jmorel/full/rIDAe
Is there any way (other than using images for the shapes) that I can extend the stripes background to my .top and .bottom divs while preserving the shape ?
I’m sure that could be thinned out some , but at the time I just wanted to see if I could do it, however I might be revisiting it soon as I want a pyramid for one of my css3 3d things.
As I was mentioning , the trick seems at least to me to be mostly in the image , specifically the corner pieces for the lower left and lower right corners in the border image. These corners themselves need to have their squares contain 1/2 transparent and 1/2 pattern at the appropriate 45 degree angles for the two bottom corners of the triangle.
With the properly made image , it’s fairly straight forward after that.