CSS：为同一分区中的特定区域定义不同的高度

是否可以在同一div中定义不同的高度值来绘制图像中的形状？ 例如 我想指定高度为10px。其中宽度为“a”。 并将高度从10px线性改变为30px；其中宽度为“b”。 并指定高度为30px；其中宽度为“c”

你可以在图中看到a、b或c的位置

---

我想我已经用伪元素做到了这一点

这是小提琴，我希望如果有人像我一样需要它，它会有用：

这是代码

HTML:

---

不，你需要用不同的元素来做这个。为什么不用两个div呢？我想我需要三个div；对于a、b和c部件？我问这个问题是因为我想知道是否有办法在同一个div中使用一个div，其中有两个div，并在其中的两个div中添加一个负边距底部，使它们在主div下“滑动”您甚至可以使用图像贴图：

<div id="a"></div>

#a{ 
    position:fixed; 
    background-color:#099; 
    left:0px; 
    top:0px; 
    width: 200px; 
    height: 40px;
}
#a:before{
    content:"";
    position:absolute;
    right: 0px;
    top: 39px;
    height:0px;
    width:0px;
    border-left: 50px solid transparent;
    border-right: 0px solid transparent;
    border-top: 50px solid #099;
}
#a:after {
    content:"";
    position:absolute;
    top: -1.7px;
    left:200px; 
    height: 90px;
    width: 300px;
    background-color:#099;
}