How to create custom shape using CSS3 to match this?

Question

I have a graph details, but i would like to show using css shapes. for that i am trying to create a css3 shapes to match my graphics ( see attached ) but i am not able to get the result.

How to reproduce this graphics?

my try: this is very bad:

<div class="container">
    <div id="triangle-red"></div>
    <div id="triangle-blue"></div>
    <div id="triangle-yellow"></div>
</div>

#triangle-red {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-blue {
    height: 0;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
}
#triangle-yellow 
{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid yellow;
    border-bottom: 50px solid transparent;
}

demo online

Note: according to the values of each comb, i would like the calculate the height and width, by the data what i am getting. (it's like graph)

Answer 1

First of all you will need 6 divs.

every div is triangle : to make one with css check this

use transform:rotate(xdeg )

for the shadows just change the color.

also use z-index to make the red divs above the blues