12 708 Тема треугольников на CSS затронута не случайно. Зачем они вобще нужны? Треугольники можно использовать в указателях, в подсказках, в элементах дизайна, да, в чем угодно...
Самый главный плюс в том, что нет необходимости использовать статичные изображения и в том, что можно строить треугольники в любую сторону и любого размера. Видимых минусов нет, кроме тех, что нужно прописывать коды в HTML и CSS. Ах, да, мы забыли еще про один плюс. Такой CSS трюк, во-первых, поддерживается кроссбраузерно, во-вторых, его код достаточно компактен.
Смотрим...
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
div.arrow-up { width:0px; height:0px; border-left:5px solid transparent; /* левый наклон стрелки */ border-right:5px solid transparent; /* правый наклон стрелки */ border-bottom:5px solid #2f2f2f; /* низ, указываем цвет стрелки */ margin:0 auto; /* центрируем стрелку в родительском контейнере */ } /* Для стрелки, смотрящей вниз, используем border-top! */ |
Секрет этих треугольников в двух вещах: ширина и высота элемента равна нулю и второе, создаются гигантские бордюры в перпендикулярном направлении, в точке, являющейся центром этого элемента.
Чем больше бордюр, тем больше треугольник. Вы можете указать для треугольника любой цвет, любой размер и любое направление. Давайте посмотрим несколько примеров.
Пример №1
|
1 2 3 4 5 6 |
div.arrow { border-color: yellow blue red green; border-style: solid; border-width: 50px 50px 50px 50px; height: 0px; width: 0px; } |
Пример №2. Красный треугольник
|
1 2 3 4 5 6 7 |
div { border-color: transparent transparent red transparent; border-style: solid; border-width: 0 50px 50px 50px; height: 0px; width: 0px; } |
Пример №3. Весы
|
1 2 3 4 5 6 7 |
div { border-color: blue transparent red transparent; border-style: solid; border-width: 50px 50px 50px 50px; height: 0px; width: 0px; } |
Пример №4. Цветок
|
1 2 3 4 5 6 7 |
.funkyShape { border-color: yellow blue red green; border-style: dotted; border-width: 50px 50px 50px 50px; height: 0px; width: 0px; } |
Пример №5. Лого del.icio.us
|
1 2 3 4 5 6 7 |
.delicious { border-color:#FFFFFF #3274D0 #D3D2D2 #000000; border-style:dashed; border-width:50px; height:0; width:0; } |
Пример №6. Сердце
|
1 2 3 4 5 6 7 8 9 |
.heart { border-color:red; border-style:dotted; border-width:0 150px 150px 0; height:0; margin-left:90px; margin-top:90px; width:0; } |
Пример №7. Параллелограмм
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.div_first { float: left; border-color: transparent red red transparent; border-style: solid; border-width: 50px 25px 50px 25px; height: 0px; width: 0px; } .div_second { float: left; border-color: red red red red; border-style: solid; border-width: 50px 50px 50px 50px; height: 0px; width: 0px; } .div_third { float: left; border-color: red transparent transparent red; border-style: solid; border-width: 50px 25px 50px 25px; height: 0px; width: 0px; } |
СПС!
Если бы эти треугольники можно было бы еще и с бордерами делать, то было бы ваще ништяк
Через хаки можно.
Не забывайте, что у каждого элемента есть как минимум два псевдо-элемента.
Если хотите увидеть реализацию, то могу сделать...
А как с помощью такого метода сделать Параллелограмм?
вот так
+ есть компактнее
класс... а если я хочу реализовать меню как у гугла типа наводишь мышкой на ссылку и взнизу border-bottom меняет цвет то здесь можно border-bottom сделать в виде параллелограмма или же исходя из треугольноков только трапецию?
Можете сделать одним элементом и трапецию и параллелограмм. В компактном методе есть примеры реализации.
наверно не поняли меня, я заинтерисовался методом
border-left:5px solid transparent; /* левый наклон стрелки */
border-right:5px solid transparent; /* правый наклон стрелки */
если это применить к
border-bottom: solid 5px #000;
то получается трапеция, а вот есть ли способ перевернуть правый треугольник, чтоб в итоге получился параллелограмм
если хотите использовать именно этот метод, то решения я вам не подскажу. а чем плох пример с ?
забыл добавить
width:100px;
у меня нет глубоких познаний верстке так общие понятия, в моем случае чтобы было одинаковые растояния между названием ссылок в меню я использую обычнный padding без указания свойства width, то есть длина блока завсисит от длины имени ссылки, в случаее border_bottom он по-умолчанию имеет такую же длину что и ссылка, а в css-tricks.com, свойство width задается явно.
а вариант с псевдоэлементами вам подойдет?
и еще меня смущает как я буду менять цвет параллелограмма при наведении мышки на ссылку (без использования JS)
смотрите ответ выше
Можно ли сделать резиновый по ширине треугольник?
К сожалению не через свойство borders. Нужны альтернативные метод построения...
Как можно задать такой цвет треугольнику?
-webkit-linear-gradient (top, ffcc00 1%, ffde00 100%)
День добрый.
А как сделать так, чтобы при наведении на треугольник он менял цвет? Здесь возникает проблема именно из-за способа построения треугольника. Выделяется вся область(как в блоке), а не только треугольник.
а где код для html?