CSS: определение разной высоты для определенных областей, которые находятся в одном и том же div

Question

Возможно ли определить различные значения высоты в том же div, чтобы нарисовать фигуру, как на изображении? Например, Я хочу указать высоту как 10px. где ширина - «а». и изменить высоту от 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; 
}