Css как сделать треугольные кнопки. Как работают треугольники CSS? Почему бы не использовать эту технику

Влад Мержевич

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

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить - через border и transform .

Использование border

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

Треугольник .block { background: green; border-radius: 10px; padding: 20px; position: relative; color: #fff; } .block::after { content: ""; position: absolute; /* Абсолютное позиционирование */ left: 20px; bottom: -20px; /* Положение треугольника */ border: 10px solid transparent; /* Прозрачные границы */ border-top: 10px solid green; /* Добавляем треугольник */ }

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Табл. 1. Возможные виды треугольников Вид Стиль

	border: 20px solid transparent; border-top: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green;
	border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

Из таблицы видно, что невидимые границы занимают место, учитывайте это при позиционировании элементов. Стиль, также, необходимо дополнить нулевой шириной и высотой или воспользоваться свойством position, как это делалось в примере 1.

Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.

Рис. 4. Острый треугольник

Пример 2. Острый треугольник

Треугольник .block { background: green; position: relative; width: 100px; height: 50px; } .block::after { content: ""; position: absolute; right: -30px; top: 15px; border: 10px solid transparent; border-left: 20px solid green; }

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

Треугольник .block { border: 1px solid green; border-radius: 10px; padding: 20px; position: relative; } .block::before, .block::after { content: ""; position: absolute; left: 20px; bottom: -20px; border: 10px solid transparent; border-top: 10px solid green; } .block::after { border-top: 10px solid white; bottom: -19px; } Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

Из-за того, что мы накладываем один однотонный элемент поверх другого, этот способ годится только для однотонной заливки и не подходит для градиентов или фоновых картинок.

Использование трансформации

С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Пример 3. Трансформация

Треугольник .block { border: 1px solid green; border-radius: 10px; padding: 20px; position: relative; background: green; color: #fff; box-shadow: 0 0 7px #000; /* Добавляем тень для блока */ } .block::after, .block::before { content: ""; position: absolute; background: green; left: 20px; bottom: -11px; width: 20px; height: 20px; box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */ z-index: -1; /* Прячем за основным блоком */ transform: rotate(45deg); /* Поворачиваем на 45º */ -webkit-transform: rotate(45deg); } .block::before { z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */ box-shadow: none; /* Прячем тень */ } Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

Результат данного примера показан на рис. 6.

Рис. 6. Треугольник с тенью

Многие слышали, что можно сделать треугольники на CSS. Для этого есть прекрасный хак со свойством border, который можно использовать, чтобы сделать треугольники на CSS без единой картинки.

Как сделать треугольники на CSS

Как по вашему должен отображать границы браузер, если у всех границ цвет прозрачный (то есть их нет), а у одной (например нижней) граница = 10px и есть цвет? Что-то мелькнуло? Правильно! Он будет сужать остальные границы постепенно в одну точку. Не логично, но это так:)

То есть, если задать одну границу = нужной высоте треугольника, а остальные границы задать с прозрачным цветом, то получим треугольник, при этому можно получить как равносторонний, так и равнобедренный треугольник. Треугольник будет направлен в сторону противоположную той, у которой указана граница. Если указать правую границу, то получи «стрелочку» влево, верхнюю границу - вниз. И т. д.

Рассмотрим треугольники на CSS на примере кода border: 30px solid transparent; /* Прозрачные границы */ border-top: 30px solid green; /* Добавляем треугольник */ width: 60px; height: 60px;

Это будет выглядеть вот так.

Одной из очень частых задач, которая встаёт перед верстальщиком, это рисование треугольников на CSS . Например, они могут быть на сворачивающихся и разворачивающихся блоках, на выпадающих меню, на каких-то других элементах интерфейса. И в этой статье я покажу самые оптимальные варианты рисования треугольника на CSS .

1-й способ

Создание простого изображения со стрелкой (например, вырезка из дизайна). Этот способ я сам постоянно использую, и знаю, что он является самым-самым популярным, и в некоторых случаях единственным. Но здесь есть большой минус, если делать прозрачные места у треугольника, то надо использовать PNG , который IE6 не поддерживает. А если брать JPG , то в зависимости от фона нужно брать то или иное изображение. В итоге, может быть 100 одинаковых стрелок, у которых разный фон, в итоге, будет 100 изображений.

2-й способ

Этот способ уже использует чистый CSS , он очень простой, но красивые уголки (например, с тенями, градиентами, с какими-нибудь сложными рисунками) на нём не сделаешь:

Triangle {
border-color: #000 #fff #fff #fff;
border-style: solid;
border-width: 10px 5px 0 5px;
height: 0;
width: 0;
}

Далее к обычному блоку div можно применить класс triangle , в результате данный блок станет стрелкой чёрного цвета (#000 ). Размеры можно регулировать через свойство border-width . Вот об этом способе многие из Вас даже не слышали, поэтому если стрелка простенькая, то это наилучший способ.

Другие способы

Время от времени я с ними сталкиваюсь, но сам не использую их, поскольку ни один из них не является кроссбраузерным. Все они используют CSS3 и/или HTML5 , которые, увы, ещё очень плохо поддерживаются даже современными браузерами, а про старые и говорить не приходится. Поэтому рекомендую Вам использовать на данный момент пока только первые 2 способа.

треугольник с обводкой css (14)

transforms = [ {"border-left-width" :"30", "margin-left": "70"}, {"border-bottom-width" :"80"}, {"border-right-width" :"30"}, {"border-top-width" :"0", "margin-top": "70"}, {"width" :"0"}, {"height" :"0", "margin-top": "120"}, {"borderLeftColor" :"transparent"}, {"borderRightColor" :"transparent"} ]; $("#a").click(function() {$(".border").trigger("click");}); (function($) { var duration = 1000 $(".border").click(function() { for (var i=0; i < transforms.length; i++) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) .border { margin: 20px 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } Click it!

Случайная статья

/** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. */ function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } transforms = [ {"border-left-width" :"30", "margin-left": "70"}, {"border-bottom-width" :"80"}, {"border-right-width" :"30"}, {"border-top-width" :"0", "margin-top": "70"}, {"width" :"0"}, {"height" :"0"}, {"borderLeftColor" :"transparent"}, {"borderRightColor" :"transparent"} ]; transforms = shuffleArray(transforms) $("#a").click(function() {$(".border").trigger("click");}); (function($) { var duration = 1000 $(".border").click(function() { for (var i=0; i < transforms.length; i++) { $(this) .animate(transforms[i], duration) } }).end() }(jQuery)) .border { margin: 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } Click it!

Все сразу версия

$("#a").click(function() {$(".border").trigger("click");}); (function($) { var duration = 1000 $(".border").click(function() { $(this) .animate({"border-top-width": 0 , "border-left-width": 30 , "border-right-width": 30 , "border-bottom-width": 80 , "width": 0 , "height": 0 , "margin-left": 100, "margin-top": 150, "borderTopColor": "transparent", "borderRightColor": "transparent", "borderLeftColor": "transparent"}, duration) }).end() }(jQuery)) .border { margin: 50px; width: 50px; height: 50px; border-width: 50px; border-style: solid; border-top-color: green; border-right-color: yellow; border-bottom-color: red; border-left-color: blue; cursor: pointer } Click it!

CSS Треугольники: трагедия в пяти действиях

У нас есть два градиента g1 и g2 , синяя линия - ширина div w и каждый градиент будет иметь 50% (w/2), и каждая сторона треугольника может быть равна w . Зеленая линия - это высота градиента hg и мы можем легко получить формулу ниже:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w

Мы можем полагаться на calc() , чтобы выполнить наш расчет и получить необходимый результат:

Tri { --w:100px; width:var(--w); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 49.8%,red 50%), linear-gradient(to bottom left, transparent 49.8%,red 50%); background-size:calc(var(--w)/2 + 0.5%) calc(0.866 * var(--w)); background-position: left bottom,right bottom; background-repeat:no-repeat; }

Другой способ - контролировать высоту div и легко сохранять синтаксис градиента:

Tri { --w:100px; width:var(--w); height:calc(0.866 * var(--w)); display:inline-block; background: linear-gradient(to bottom right, transparent 49.8%,red 50%) left, linear-gradient(to bottom left, transparent 49.8%,red 50%) right; background-size:50.2% 100%; background-repeat:no-repeat; }

4) Случайный треугольник

Чтобы получить случайный треугольник, это легко, так как нам просто нужно удалить условие 50% каждого из них, но мы должны сохранить два условия (оба должны иметь одинаковую высоту, а сумма обеих ширины должна быть 100%).

Tri-1 { width:100px; height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 50%,red 0), linear-gradient(to bottom left, transparent 50%,red 0); background-size:20% 60%,80% 60%; background-position: left bottom,right bottom; background-repeat:no-repeat; }

Но что, если мы хотим определить значение для каждой стороны? Нам просто нужно сделать расчет снова!

Определим hg1 и hg2 как высоту нашего градиента (оба они равны красной линии), а затем wg1 и wg2 как ширина нашего градиента (wg1 + wg2 = a). Я не буду детализировать расчет, но в конце мы будем иметь:

Wg2 = (a²+c²-b²)/(2a) wg1 = a - wg2 hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

Теперь мы достигли предела CSS, так как даже с calc() мы не сможем реализовать это, поэтому нам просто нужно собрать окончательный результат вручную и использовать их как фиксированный размер:

бонус

Мы не должны забывать, что мы можем также применять поворот и / или перекос, и у нас есть больше возможностей для получения большего треугольника:

Tri { --wg1: 20px; --wg2: 60px; --hg:30px; width:calc(var(--wg1) + var(--wg2)); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 50%,red 0), linear-gradient(to bottom left, transparent 50%,red 0); background-size:var(--wg1) var(--hg),var(--wg2) var(--hg); background-position: left bottom,right bottom; background-repeat:no-repeat; }

И, конечно же, мы должны иметь в виду решение SVG, которое может быть более подходящим в некоторой ситуации:

svg { width:100px; height:100px; } polygon { fill:red; }

Другие уже объяснили это хорошо. Позвольте мне дать вам анимацию, которая будет объяснять это быстро: http://codepen.io/chriscoyier/pen/lotjh

Вот вам какой-то код для игры и изучения концепций.

/*border-width is border thickness*/ #border-demo { background: gray; border-color: yellow blue red green;/*top right bottom left*/ border-style: solid; border-width: 25px 25px 25px 25px;/*top right bottom left*/ height: 50px; width: 50px; }

Играйте с этим и посмотрите, что произойдет. Установите высоту и ширину в ноль. Затем удалите верхнюю границу и сделайте левую и правую прозрачными или просто посмотрите на код ниже, чтобы создать треугольник css:

#border-demo { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; }

Разный подход. С линейным градиентом (для IE, только IE 10+). Вы можете использовать любой угол:

Triangle { margin: 50px auto; width: 100px; height: 100px; /* linear gradient */ background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%); /* W3C */; }

Начните с основного квадрата и границ. Каждая граница будет иметь другой цвет, поэтому мы можем рассказать им обособленно:

Triangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; }

Но нет верхней границы, поэтому установите ее ширину на 0px . Теперь наш 200px сделает наш треугольник 200px высоким.

Triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; }

Затем, чтобы скрыть два боковых треугольника, установите прозрачность рамки. Так как верхняя граница эффективно удалена, мы можем также установить прозрачность границы с верхним цветом.

Triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; }

Рассмотрим ниже треугольник

Triangle { border-bottom:15px solid #000; border-left:10px solid transparent; border-right:10px solid transparent; width:0; height:0; }

Это то, что нам дано:

Почему это получилось в такой форме? На приведенной ниже диаграмме объясняются размеры, обратите внимание, что 15px использовался для нижней границы, а 10px использовался для левого и правого.

Очень легко сделать прямоугольный треугольник, также удалив правильную границу.

А теперь что-то совсем другое...

Вместо использования трюков css не забывайте о решениях так же просто, как html-объекты:

▲

Границы используют угловой край, где они пересекаются (угол 45 ° с равными ширинами, но изменение ширины границы может исказить угол).

Скрывая определенные границы, вы можете получить эффект треугольника (как вы можете видеть выше, делая разные порции разных цветов). transparent часто используется в качестве краевого цвета для достижения формы треугольника.

вот еще одна скрипка:

Container:after { position: absolute; right: 0; content: ""; margin-right:-50px; margin-bottom: -8px; border-width: 25px; border-style: solid; border-color: transparent transparent transparent #000; width: 0; height: 0; z-index: 10; -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out; bottom: 21px; } .container { float: left; margin-top: 100px; position: relative; width: 150px; height: 80px; background-color: #000; } .containerRed { float: left; margin-top: 100px; position: relative; width: 100px; height: 80px; background-color: red; }

Разный подход:

CSS3 треугольники с поворотом вращения

Треугольную форму довольно легко сделать с помощью этой техники. Для людей, которые предпочитают видеть анимацию, объясняющую, как эта техника работает здесь, она:

• Ссылка на ANIMATION: Как создать треугольник CSS3 .
• И DEMO: треугольники CSS3, сделанные с преобразованием, вращаются.

В противном случае здесь приводится подробное объяснение в 4-х действиях (это не трагедия) о том, как сделать равнобедренный прямоугольный треугольник с одним элементом.

• Примечание 1: для не равнобедренных треугольников и причудливых вещей вы можете увидеть шаг 4 .
• Примечание 2: в следующих фрагментах префиксы поставщиков не включены. они включены в демоны codepen .
• Примечание 3: HTML для следующего объяснения всегда:

ШАГ 1: Сделайте div

Легко, просто убедитесь, что width = 1.41 x height . Вы можете использовать любой техник (), в том числе использование процентных значений и padding-bottom для поддержания соотношения сторон и создания гибкого треугольника . На следующем изображении div имеет золотую желтую границу.

В этом div вставьте псевдоэлемент и дайте ему 100% ширину и высоту родительского элемента. Псевдоэлемент имеет синий фон на следующем изображении.

CSS :

Tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr: before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; }

ШАГ 2: Давайте повернуть

Во-первых, самое важное: определить происхождение преобразования . По умолчанию начало координат находится в центре псевдоэлемента, и оно нам нужно в левом нижнем углу. Добавив этот CSS в псевдоэлемент:

transform-origin:0 100%; или transform-origin: left bottom;

Теперь мы можем вращать transform: rotate(45deg); 45 градусов по часовой стрелке с transform: rotate(45deg);

На данный момент у нас есть этот CSS :

Tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; } .tr:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); }

ШАГ 3: скрыть это

Чтобы скрыть нежелательные части псевдоэлемента (все, что переполняет div с желтой рамкой), вам просто нужно установить overflow:hidden; на контейнере. после удаления желтой границы, вы получите... ТРЕУГОЛЬНИК ! :

Tr { width: 30%; padding-bottom: 21.27%; /* = width / 1.41 */ position: relative; overflow: hidden; } .tr:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0079C6; transform-origin: 0 100%; transform: rotate(45deg); }

ШАГ 4: идите дальше...

Сделав еще один шаг, используя css на основе этого, я добавил стрелки в свою спину и следующие кнопки (да, я знаю, что это не 100% кросс-браузер, но, тем не менее, пятно).

Triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin:20px auto; } .triangle-down { border-bottom:none; border-top: 100px solid red; } .triangle-left { border-left:none; border-right: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-right { border-right:none; border-left: 100px solid red; border-bottom: 50px solid transparent; border-top: 50px solid transparent; } .triangle-after:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid red; margin:0 5px; content:""; display:inline-block; } .triangle-after-right:after { border-right:none; border-left: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .triangle-before:before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid blue; margin:0 5px; content:""; display:inline-block; } .triangle-before-left:before { border-left:none; border-right: 5px solid blue; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } Back Next