CSS:为同一div中的特定区域定义不同的高度

Question

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

您可以在图像中看到 a、b 或 c 的位置。

Answer 1

我想我已经通过使用伪元素做到了这一点；

这是 fiddle ，希望对像我一样需要的人有用:

http://jsfiddle.net/ctarimli/uQQhG/1/

这是代码；

HTML:

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

CSS:

#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;
}