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)

I'm not sure those shapes can be created using "css shapes" (looks like you're using borders), not without some sort of CSS transforms anyway. — evolutionxbox
– evolutionxbox, Commented Jul 30, 2015 at 7:11
A <canvas> may be a better approach. Two libraries I would recommend is D3 and Flot — glend
– glend, Commented Jul 30, 2015 at 7:31

Elheni Mokhles · Accepted Answer · 2015-07-30 07:21:31Z

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

answered Jul 30, 2015 at 7:21

Elheni Mokhles

4,0112 gold badges15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

3gwebtrain Over a year ago

As like your Idea, I tried here. still can you help me to fine tune or show me even good approach. jsfiddle.net/u78bQ/441

Collectives™ on Stack Overflow

How to create custom shape using CSS3 to match this?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related