I have some detailed graphs, but I want to display them using CSS shapes. I've been attempting to create css3 shapes that match my graphics (see attached image), but without success.
How can I replicate these graphics?
https://i.sstatic.net/2pxaW.png
This is my attempt:
<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;
}
Note: Based on the values of each combination, I intend to calculate the height and width according to the data received. It's similar to creating a graphical representation.