Рисовать angular side/parallelogram используя CSS

Ответ 1

Как насчет использования 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.

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

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

Демо 3 (цвет изменен)

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

Здесь я использую простой элемент div и помещаю в контейнер 2 треугольника CSS, которые positioned absolute. Это более совместимо, чем выше, если вы собираетесь использовать решение NON 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;
}

Ответ 2

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

Ответ 3

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

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

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

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

Получайте удовольствие от экспериментов...:)