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 . Например, они могут быть на сворачивающихся и разворачивающихся блоках, на выпадающих меню, на каких-то других элементах интерфейса. И в этой статье я покажу самые оптимальные варианты рисования треугольника на 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 способа.

18 ответов

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

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

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

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

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

Но нет необходимости в верхней границе, поэтому установите ее ширину на 0px . Теперь наш border-bottom 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; }

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

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

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

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

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

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

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

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

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

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;

Теперь мы можем вращать псевдоэлемент 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: идите дальше...

Как показано в демонстрации вы можете настроить треугольники:

Сделайте их более тонкими или более плоскими, играя с skewX() .
Сделайте так, чтобы они указывали влево, вправо или в любом другом направлении, играя с направлением преобразования и поворота.
Сделайте некоторое отражение с трёхмерным преобразованием.
Дайте границы треугольника
Поместите изображение внутри треугольника
Гораздо больше... Освободите полномочия CSS3!

Зачем использовать этот метод?

Треугольник может легко реагировать.
Вы можете сделать треугольник с рамкой .
Вы можете сохранить границы треугольника. Это означает, что вы можете активировать состояние зависания или событие click, только когда курсор внутри треугольника . Это может стать очень удобным в некоторых ситуациях, таких как этот , где каждый треугольник не может наложить его на соседей, чтобы каждый треугольник имел собственное состояние зависания.
Вы можете сделать некоторые фантастические эффекты, такие как отражения .
Это поможет вам понять свойства преобразования 2d и 3d.

Почему бы не использовать эту технику?

Основным недостатком является совместимость браузера , свойства преобразования 2d поддерживаются IE9 +, и поэтому вы не можете использовать эту технику, если планируете поддерживать IE8. Для получения дополнительной информации см. CanIuse . Для некоторых причудливых эффектов с использованием 3D-преобразований, таких как поддержка отражения поддерживается IE10 + (см. canIuse для получения дополнительной информации).
Вам не нужно ничего отзывчивого, и простой треугольник подходит для вас, тогда вы должны пойти на описанную здесь технику границы: лучше совместимость с браузером и легче понять, благодаря сообщениям о amaizing здесь.

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!

Допустим, что мы имеем следующий div:

Теперь измените CSS поэтапно, так что вы получите четкое представление о том, что происходит вокруг

#triangle { background: purple; width:150px; height:150PX; border-left: 50px solid black ; border-right: 50px solid black; border-bottom: 50px solid black; border-top: 50px solid black; }

Это простой div. С очень простым CSS. Так что непрофессионал может понять. Div имеет размеры 150 x 150 пикселей с границей 50 пикселей. Изображение прилагается:

#triangle { background: purple; width:150px; height:150PX; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; }

Теперь я просто изменил пограничный цвет всех четырех сторон. Изображение прикреплено.

#triangle { background: purple; width:0; height:0; border-left: 50px solid yellow ; border-right: 50px solid green; border-bottom: 50px solid red; border-top: 50px solid blue; }

Теперь я просто изменил высоту и ширину div от 150 пикселей до нуля. Изображение прикреплено

#triangle { background: purple; width:0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; }

Теперь я сделал все границы прозрачными, кроме нижней границы. Изображение прилагается ниже.

#triangle { background: white; width:0px; height:0px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; border-top: 50px solid transparent; }

Теперь я просто изменил цвет фона на белый. Изображение прикреплено.

Следовательно, мы получили необходимый нам треугольник.

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

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

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

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

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

Сделав еще один шаг, используя 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

Разный подход. С линейным градиентом (для 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 */; }

ОК, этот треугольник будет создан из-за того, как границы элементов работают вместе в HTML и CSS...

Поскольку мы обычно используем границы 1 или 2px, мы никогда не замечаем, что границы имеют угол 45 ° друг к другу с одинаковой шириной, и если ширина изменяется, степень угла также изменяется, запустите код CSS, который я создал ниже:

Triangle { width: 100px; height: 100px; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; }

Затем на следующем шаге у нас нет ширины и высоты, что-то вроде этого:

Triangle { width: 0; height: 0; border-left: 50px solid black; border-right: 50px solid black; border-bottom: 100px solid red; }

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

Triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

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

Это то, что я чувствую, что этот вопрос пропустил; clip-path

clip-path в двух словах

Обрезание с помощью свойства clip-path сродни разрезанию фигуры (например, круга или пятиугольника) из прямоугольного листа бумаги. Свойство принадлежит спецификации CSS Masking Module Level 1 ". Спецификация заявляет:" Маскировка CSS предоставляет два средства для частичного или полного скрытия частей визуальных элементов: маскирование и обрезка ".

clip-path будет использовать сам элемент, а не его границы, чтобы вырезать фигуру, указанную в параметрах. В нем используется супер простая процентная система координат, которая упрощает ее редактирование и означает, что вы можете забрать ее и создать странные и прекрасные формы за считанные минуты.

Пример формы треугольника

Div { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: red; width: 100px; height: 100px; }

Даунсайд

В настоящий момент у него есть существенный недостаток: одна из них - большая нехватка поддержки, только на самом деле распространяется в браузерах -webkit- и не имеет поддержки IE и только очень частично в FireFox.

Ресурсы

Вот некоторые полезные ресурсы и материалы, чтобы лучше понять clip-path , а также начать создавать свои собственные.

Позволяет создать 2 треугольника, для второго мы будем использовать псевдо-класс:after и расположим его чуть ниже другого:

Arrow{ width: 0; height: 0; border-radius: 50px; display: inline-block; position: relative; } .arrow:after{ content: ""; width: 0; height: 0; position: absolute; } .arrow-up{ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #333; } .arrow-up:after{ top: 5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #ccc; right: -50px; }

Шаг 2

Теперь нам просто нужно установить преобладающий цвет границы второго треугольника на тот же цвет фона:

Скриншот со всеми стрелками:
http://jsfiddle.net/tomsarduy/r0zksgeu/

Почти все ответы сосредоточены на треугольнике, построенном с использованием границ, поэтому я собираюсь разработать метод linear-gradient (как и началось в ответе @lima_fil).

Использование значения градуса, такого как 45° , заставит нас соблюдать определенное соотношение height/width , чтобы получить желаемый треугольник, и это не будет отзывчивым:

Tri { width:100px; height:100px; background:linear-gradient(45deg, transparent 49.5%,red 50%); /*To illustrate*/ border:1px solid; } Good one bad one bad one

Вместо того, чтобы делать это, мы должны рассмотреть предопределенные значения направления, например, to bottom , to top и т.д. В этом случае мы можем получить любой вид треугольника, сохраняя его отзывчивость.

1) Прямоугольный треугольник

Чтобы получить такой треугольник, нам нужен один линейный градиент и диагональное направление, например, to bottom right , to top left , to bottom left и т.д.

Tri-1,.tri-2 { display:inline-block; width:100px; height:100px; background:linear-gradient(to bottom left, transparent 49.5%,red 50%); border:1px solid; animation:change 2s linear infinite alternate; } .tri-2 { background:linear-gradient(to top right, transparent 49.5%,red 50%); border:none; } @keyframes change { from { width:100px; height:100px; } to { height:50px; width:180px; } }

2) равнобедренный треугольник

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

Tri { display:inline-block; width:100px; height:100px; background-image: linear-gradient(to bottom right, transparent 49.5%,red 50%), linear-gradient(to bottom left, transparent 49.5%,red 50%); background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/ background-position:left,right; background-repeat:no-repeat; animation:change 2s linear infinite alternate; } @keyframes change { from { width:100px; height:100px; } to { height:50px; width:180px; } }

3) равносторонний треугольник

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

Мы имеем два наших градиент g1 и g2 , синяя линия ширина div w и каждый градиент будет иметь 50% от него (w/2), и каждая сторона треугольника sould быть равна 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.5%,red 50%), linear-gradient(to bottom left, transparent 49.5%,red 50%); background-size:calc(var(--w)/2 + 0.5px) 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 49.5%,red 50%), linear-gradient(to bottom left, transparent 49.5%,red 50%); background-size:var(--wg1) var(--hg),var(--wg2) var(--hg); background-position: left bottom,right bottom; background-repeat:no-repeat; }

бонус

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

Tri { --wg1: 20px; --wg2: 60px; --hg:30px; width:calc(var(--wg1) + var(--wg2) - 0.5px); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 49%,red 50%), linear-gradient(to bottom left, transparent 49%,red 50%); 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; }

Разбираясь в одном заинтересовавшем меня проекте наткнулся на интересный пример как создать треугольник css. А так как треугольники стали постоянно используемыми элементами веб страницы, то мы должны их уметь создавать.Об этом методе и будет эта заметка.

Погуглив вопрос как сделать треугольник css нашёл ещё несколько интересных методов, но пример из проекта мне понравился больше. Это метод старый и давно известный. Он основан на использовании таких css свойств как border-color и border-width . Суть метода проста. Создаём какой либо блок(div), и и задаём ему css свойства border-color и border-width . Свойство border-width задаёт толщину границы, и принимает четыре значения. Толшину границы сверху, справа, снизу, слева. Напоминаю что при записи этого css свойства отсчёт начинается от верхней границы и идёт по часовой стрелке. Таким образом, что бы создать из нашего блока треугольник вершиной вверх в свойстве border-width запишем верхнюю границу толшиной 0, левую и правую толщиной в половину блока, а нижнюю в тощину блока. С свойством border-color то же я думаю уже стало понятно. Оно тоже принимает четыре значения по сторонам блока. Если у нас треугольник на белом фоне, все границы задаём белым цветом, кроме нижней. Ну а теперь по обыкновению пример. Так как заметка получилась не очень большая решил добавить к треугольнику анимацию на css.

.trianglebox{ width: 200px; height: 110px; border: 1px solid #000; padding-top: 25px; margin: 0 auto; } .triangle{ margin: 0 auto; width: 0px; height: 0px; border-style: solid; /*для треугольника css*/ border-color: #fff #fff #060 #fff; border-width: 0px 25px 50px 25px; /*для анимации*/ -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s; transition: .3s; } .trianglebox:hover > .triangle{ /*для анимации*/ border-color: #fff #fff #ccc #fff; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }

Пример: Для анимации наведите на треугольник

Как видите всё достаточно просто. К недостатку такого метода можно отнести, что треугольнику не получится задать тени и остальные красивости. Но метод прост и кроссбраузерен. Использовать ли его в проектах решать вам.

треугольник с обводкой 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!

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

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

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 и легко сохранять синтаксис градиента:

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

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

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

Определим 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-demo { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; }

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

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

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 :

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

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

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