рисовать угловую сторону/параллелограмм с помощью CSS

Как насчет использования CSS3 transform skew?

Демо

.shape { 
    width: 200px; 
    height: 50px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    background: #000;
    margin: 20px;
}

Здесь особо нечего объяснять, это простой элемент div, который я перекосил на 30deg, что приведет к ожидаемой вами форме.

Примечание. Это свойство CSS3, поэтому старые браузеры, а также IE могут испортить вам работу, убедитесь, что вы используете CSS3 Pie.

Другой способ добиться этого — использовать псевдо- и CSS-треугольники :after и :before вместе со свойством content.

Демонстрация 2 (красные треугольники сохранены для демонстрационных целей)

Демонстрация 3 (цвет изменен)

Демонстрация 4 (как вы отметили, вам также нужно использовать top: 0; для :before и :after псевдо, потому что когда вы добавляете текст, он смещает оба треугольника сверху, поэтому, чтобы предотвратить это, используйте top: 0;)

Здесь я использую простой элемент div и помещаю 2 треугольника CSS, которые positioned absolute, в контейнер. Это более совместимо, чем указано выше, если вы собираетесь использовать решение НЕ CSS3, вы можете выбрать это. Убедитесь, что вы используете display: block; для :before, а также :after. И, конечно же, вы можете объединить общие стили, но я сохранил оба стиля отдельно, чтобы вы могли легко настраивать их по отдельности.

 .shape { 
    width: 200px; 
    height: 50px; 
    background: #000;
    margin: 50px;
    position: relative;
}

.shape:before {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: -50px;
}

.shape:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-top: 25px solid transparent;
    border-right: 25px solid transparent;
    position: absolute;
    right: -50px;
}

HTML

<div class="shape">
    <div class="text">
           text goes here
    </div>
 </div>

CSS

 .shape { 
    width: 200px; 
    height: 30px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    background: #000;
    margin: 20px;
    color:#fff;
}
.text{
    width: 150px; 
    height: 30px; 
    margin:0px auto;
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    transform: skew(-30deg);
     color:#fff;
}

Одна из основных проблем, с которой я столкнулся при использовании треугольных границ, заключается в том, что нет простого способа иметь несколько треугольников с разными цветами, даже используя javascript [потому что JS не может получить доступ к псевдоэлементам :before и :after], альтернативой является то, что я используйте 3 элемента div, правильно выровняйте их и придайте всем им одинаковый цвет и т. д. Слишком много хлопот.

Лучшим способом было бы использовать transform: skew() для новых браузеров.

Но вы должны иметь в виду, что это также преобразует каждый элемент внутри этого div. Таким образом, текст внутри строки меню также будет искажен. Чтобы противостоять этому, добавьте reverse-skew во внутренний элемент div следующим образом:

.menu-container {
   ...
   transform: skewX(30deg);
   ...
}
.menu-inner {
   ...
   transform: skewX(-30deg);
   ...
}

Удачных экспериментов... :)