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

нужно нарисовать угловые стороны меню как

this image

внутренним содержанием могут быть некоторые метки или ссылки.

10
css css-shapes

3 ответов

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

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

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

демо 3 (Цвет Изменен)

демо 4 (как вы прокомментировали, вам нужно использовать top: 0; на :before и :after псевдо, потому что, когда вы добавляете текст, он будет сдвигать оба треугольника сверху. Так inorder, чтобы предотвратите это, используйте 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;
}
11

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

весело экспериментировать... :)

0