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

Question

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

您可以在图片中看到a，b或c。

Answer 1

我想我已经使用伪元素完成了这个;

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

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