Нужно рисовать angular стороны меню как
Внутренний контент может быть несколькими ярлыками или ссылками.
Нужно рисовать angular стороны меню как
Внутренний контент может быть несколькими ярлыками или ссылками.
Как насчет использования 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;
}
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 не может получить доступ к псевдоэлементам: до и: после], альтернатива что я использую 3 divs, выровняю их правильно и даю им одинаковый цвет и т.д. Слишком много хлопот.
лучший способ будет использовать transform: skew()
для новых браузеров.
Но вам нужно иметь в виду, что это преобразит каждый элемент внутри этого div. Таким образом, текст внутри вашего меню-панели также будет искажен. Чтобы противостоять этому, добавьте обратное косо во внутреннее div следующим образом:
.menu-container {
...
transform: skewX(30deg);
...
}
.menu-inner {
...
transform: skewX(-30deg);
...
}
Получайте удовольствие от экспериментов...:)