javascript - 如何使用 CSS3 创建自定义形状来匹配它？

Question

我有图表详细信息，但我想使用 css 形状来展示。为此，我正在尝试创建一个 css3 形状来匹配我的图形(见附件)，但我无法获得结果。

如何重现这个图形？

我的尝试:这是非常糟糕的:

<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

注意:根据每个梳子的值，我想根据我得到的数据计算高度和宽度。 (这就像图表)

Answer 1

首先，您需要 6 个 div。

每个 div 都是三 Angular 形:用 css 制作一个检查 this

使用transform:rotate(xdeg )

对于阴影，只需改变颜色即可。

也可以使用 z-index使红色 div 位于蓝色

之上