Как нарисовать треугольник на CSS
Одной из очень частых задач, которая встаёт перед верстальщиком, это рисование треугольников на 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 способа.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 6 ):
Чтобы треугольник css-м был прозрачным, нужно и в border-color указать не #fff, а transparent
а как вправо повернуть?
не работает 2-й способ, border-width 4 означает Поочередно устанавливается толщину верхней, правой, нижней и левой границы. ни о каком треугольнике речь не идёт это просто пустой блок, border-color задаёт цвета границ этого блока по 4-м сторонам и на моём хосте никакого треугольника не отображается, border-width это ширина границы блока а не ширина блока
Почитайте статью Мержевича на этот счёт http://htmlbook.ru/blog/treugolniki-cherez-css, а пример в этой статье нужно дополнить вот так: .triangle < border-color: transparent; border-style: solid; border-width: 20px; border-left-color:green; border-left-style: solid; border-left0width: 20px; height: 0; width: 0; >причём важна последовательность в начале указываются свойства для border а потом для border-left
а как этот треугольник поместить в нужное место, например, справа от текста в пункте меню ?
Добрый день, дополнительные способы создания треугольников есть [URL="https://pop-code.ru/css/treugolnik-css-kvadrat-i-shestiugolnik-sozdanie-figur-cherez-css-it-blog-popcode/"]здесь [/URL]
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How to create a transparent triangle with border using CSS?
You can see it working at Triangle. This is working, but with a trick of borders. Is there another way it could be done?
Using SVG vectors this can be done easily, but I don’t want to go that lengthy way.
9 Answers 9
I’ve found a webkit-only solution, using the ▲ character:
-
for text-stroke — all major browsers covered as of 2019 article
Adding a white triangle inside the black one: http://jsfiddle.net/samliew/Hcfsx/
In addition to the below answer using gradients, I also have an online generator for polygon shapes where you can get a border-only triangle: https://css-generators.com/polygon-shape/
Here is an idea using multiple background and linear-gradient :
You can consider CSS variables to easily adjust the shape:
A different syntax with less gradient:
You can consider the same idea to create a rectangle triangle:
If you want an equilateral triangle simply keep a ratio bettween the width/height using the initial code
Related answer for more details about the calculation: How do CSS triangles work?
Here is the tutorial
You can use the method I described here : How does this CSS triangle shape work? with a rotated pseudo element. You can then add a border to the rotated pseudo element to create the effect you are looking for.
You can also use this technique to display the triangle with borders over an image, gradient or any non plain backgrounds :
Как сделать пустой треугольник
На мой взгляд, одним из интересных нововведений в CSS3 , является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур.
Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3 . Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.
В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3 .
Что вам понадобится для использования данного руководства
- Знание CSS3 ;
- Время и внимание.
Скачать исходные файлы
Просмотреть демонстрацию
Окружность
HTML
Для создания окружности с помощью CSS , во-первых, мы будем использовать тег div . Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle :
CSS
Что касается CSS , просто задаем значения width и height , а затем задаем значение border radius , равное половине от width и height :
Квадрат
HTML
Чтобы создать квадрат в CSS , как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div :
CSS
Для создания квадрата в CSS , просто задаем значения width и height равные друг другу:
Прямоугольник
HTML
Чтобы создать прямоугольную форму, в CSS , как и в случае с квадратом, настраиваем div , где ID равно rectangle :
CSS
Так же, как и в случае с квадратом, мы зададим значения width и height , но на этот раз width будет больше, чем height :
HTML
Для создания овала в CSS , создаем div с ID равным oval :
CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :
Треугольник
HTML
И снова, для создания треугольника с помощью CSS , делаем div с ID равным triangle .
CSS
Для создания треугольника мы будем манипулировать свойством border . Изменяя ширину границы, вы получите различные углы поворота:
Треугольник, направленный вниз
HTML
Создаем перевернутый треугольник с помощью CSS . Снова создаем div . ID равно triangle_down :
CSS
Создавая перевернутый треугольник, оперируем толщиной границы:
Треугольник, направленный влево
HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :
CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:
Треугольник, направленный вправо
HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :
CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:
HTML
Для создания фигуры « ромб », создаем div с ID diamond :
CSS
Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate , мы можем отобразить два треугольника, расположенных рядом друг с другом:
Трапеция
HTML
Для создания фигуры « трапеция », создаем div с ID равным trapezium .
CSS
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:
Параллелограмм
HTML
Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :
CSS
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:
Звезда
HTML
Для создания фигуры « звезда », создаем div с ID равным star :
CSS
Создание фигуры « звезда » — последовательность странных манипуляций с границами с использованием свойства transform равным rotate . Смотрите код ниже:
Звезда (6ти конечная)
HTML
Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :
CSS
Шестиконечная звезда создается с помощью свойства border . Создаем два набора фигур и комбинируем в одну:
Пятиугольник
HTML
Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :
CSS
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:
Шестиугольник
HTML
Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :
CSS
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:
Восьмиугольник
HTML
Для создания фигуры « восьмиугольник », создаем div с ID octagon :
CSS
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:
Сердце
HTML
Для создания фигуры « сердце », создаем div с ID heart :
CSS
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:
HTML
Для создания фигуры « яйцо », создаем div с ID egg :
CSS
Концепция фигуры « яйцо » похожа на концепцию фигуры « овал », за исключением свойства height , которое больше, чем width . И особое внимание в этой фигуре придается свойству radius . С помощью подбора его значений можно добиться нужного результата:
Бесконечность
HTML
Для создания фигуры « бесконечность », создаем div с ID infinity:
CSS
Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:
Бабл для комментария
HTML
Для создания фигуры « библ », создаем div с ID comment_bubble :
CSS
Эта фигура может быть создана путем создания треугольника и задания свойства border radius , а затем присоединения прямоугольника к его левой стороне:
Pacman
HTML
Для создания фигуры « pacman », создаем div с ID pacman :
CSS
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:
Заключение
Есть множество возможностей создания фигур с помощью CSS3 . Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый « костыль » в случае браузеров эпохи юрского периода, на подобии Internet Explorer .
Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.
Вадим Дворников автор-переводчик статьи « Make Shapes with CSS: How to Create Different Shapes in CSS »
Квадратики, это конечно интересно,
но нигде не нашёл, как вот такую фигуру слепить, как на скриншоте.
Возможно такое ?
Скопирована с хаба
Добрый день.
Вы можете подсказать как нарисовать в css такой круг?
Генератор треугольников, если кому интересно:
Вот тут я подробно написал по какому принципу выполнить звезду.
Ну и нулевую высоту имеет смысл указывать только если в блоке предполагается содержимое. Если мы зададим нулевую высоту, то содержимое не будет растягивать блок.
Ну а в последнем примере вместо последних четырёх свойств можно было указать одно: border-radius: 70px. Впрочем, возможно, примеры подобраны так, чтоб показать что одни и те же свойства можно задавать иногда разными свойствами.
Чтоб понять как работает восьмиугольник нужно сделать его на белом фоне. Тогда видно, что грани не обрезаются, а просто граница, с помощью которой сделан эффект перехода, совпадает по цвету с фоном, в котором находится восьмиугольник. Для того, чтоб не зависеть от фона, нужно сделать исходным не квадрат, а прямоугольник и к нему приделать две трапеции.
Интересно соотношение размеров. 29 ширина перехода + 42 ширина грани + 29 ширина второго перехода = 100 пикселей, равен квадрату.
При этом, если исходить из того, что грани должны быть равны, то 29 пикселей перехода должны образовывать грань в 42 пикселя. Поскольку 29 пикселей это катет прямоугольного треугольника, а грань — его гипотенуза, то, по теореме Пифагора, 29 в квадрате (841) + ещё столько же (сумма квадратов катетов 1682) должна быть равна 42 в квадрате (1764).
Ну, почти. 🙂
А как сделать параллелограмм, но так чтобы правило наклона не воздействовало на текст?
Блог молодого админа
Увлекательный блог увлеченного айтишника
Треугольник на клавиатуре компьютера или ноутбука: как написать?
Знак треугольника обычно не используется при письме, однако во всем есть свои исключения. Имеется ли символ треугольника на клавиатуре ПК или ноутбука? На типовой — нет, что, однако, никак не помешает вам поставить треугольник с помощью все той же клавиатуры. Как именно, расскажет и покажет наш сайт.
Первый способ
Включите цифровую клавиатуру (при необходимости) с помощью клавиши Num Lock.
Зажмите Alt (левый или правый) и наберите цифры 30 (раскладка клавиатуры не имеет значения), затем отпустите Alt.
Вот что получится:
Второй способ
Нажмите Win+R, чтобы появилось окно «Выполнить».
Введите команду charmap.exe, после чего кликните ОК.
Перед вами — таблица символов Windows.
Находите символ треугольника и нажимаете на него (в примере используется шрифт Arial), а затем жмете по кнопкам «Выбрать» и «Копировать» — именно в таком порядке. Обратите внимание, что здесь есть и прозрачный треугольник.
Знак скопирован. Вставьте его.
Последний способ
Можете скопировать один из представленных треугольников ниже:
Как выровнять пустой треугольник?
Привет, задача состоит в том, что бы нарисовать пустой треугольник.
Вот что написал
Получился кривой чутка: 
Должен быть такой: 
Но треугольник получается какой то кривой, что то запутался. Где собственно ошибка в коде?
5 Ways To Create A Triangle With CSS
Probably the easiest way to add a triangle in a web page is to simply draw it in an image and add the image to the web page. There are many secrets to drawing the perfect triangle and you can read how to do that in Photoshop in this article: Create A Triangle in Photoshop or download this free pack of triangle shapes for Photoshop.
In this post I will show you how to create a triangle with CSS & HTML.
Here’s an overview of the different methods I will use:
- Create a triangle using CSS border
- Create a triangle with CSS gradients ( linear-gradient and conical-gradient )
- Create a triangle using overflow and transform
- Create a triangle using clip-path
Using border to Create a Triangle in CSS
If you’ve searched the internet for how to make a CSS triangle, you’ve probably seen this awesome article from CSS tricks. They quickly explain how to create a triangle using the CSS border property.
Let me quickly explain!
Consider the following HTML code:
which will render like this:
This is because the borders of an HTML element form an angle where they join. We can make use of this to create a triangle by setting a transparent color for 3 of the borders and leaving only one visible. So, the bottom border will create a triangle pointing up, the left border will create a triangle pointing right and so on.
Here’s the CSS code for creating a green triangle pointing up:
which renders like this:
And now, a bit of math.
As you can see, this triangle is a right triangle. So, the upper angle is 90 degrees. It’s also an isosceles triangle because it has two equal sides. When setting the same size for all the borders, we are actually setting the height of the triangle.
So, 20 pixels in our case.
Because our triangle is a right triangle and isosceles, we can determine that the base of the triangle is 40 pixels (half of the border size we used). Then each sides is equal to basis / sqrt(2) so approximately 28.2 pixels.
How To Make An Equilateral Triangle Using border
What if we want the triangle to be equilateral? So, all three sides of the triangle to be equal?
Let’s do some math!
In the previous example, we’ve seen that the border size actually decides the height of the triangle. The formula for the height of the equilateral triangle is:
height = side * sqrt(3) / 2
We also need to keep in mind, that our basis is twice the size of the border we chose.
So, for a border-width set to 20px for the transparent borders, we need to set the border size to 2 * 20px * sqrt(3) / 2
We can approximate sqrt(3)/2 to roughly 0.866 so here’s the CSS equilateral triangle:
which renders like this:
Alternatively, there’s a neater way to write the CSS class for this:
Using a CSS variable allows us to set the size of the equilateral triangle in only one place.
How To Create a Triangle Using CSS Gradients
Another way to draw a triangle using CSS only is by using gradients.
Which renders as a right triangle:
This basically creates a gradient fill coming from top left to bottom right and a hard stop right in the middle (50%).
We can also make use of the less known CSS gradient type conic-gradient like this:
Another way to draw a triangle using CSS only is by using gradients.
Which renders a similar right isosceles triangle as above:
This creates a triangle of height 20 pixels and gives us a a bit more control over the angle pointing up. As you see we instruct the gradient to fill the div between 135 degrees and 225 degrees (making a right angle). In a similar way we can create arrows pointing down, left or right just by changing the range of the angles.
For some reason, this seems to create a bit of a rough edge. If you guys know of a way to improve this please let me know.
How To Create a Triangle Using CSS transform and overflow
If we want, we can create a triangle by adding a pseudo element to a square div, rotate it by 45 degrees and using overflow:hidden to hide the parts of the resulting triangle that fall outside our div square.
Which will render as:
How To Create A Triangle In CSS Using clip-path
And here’s another way to make a CSS triangle. We can use the clip-path property. This property works like a clipping mask in Photoshop. Basically you can show only parts of an HTML element.
clip-path accepts a number of value types from reference to SVG files to an inline polygon definition. When talking about SVG clip paths I do recommend reading Sara Soueidan’s blog as she is a true master in that area imho.
Let’s see how that works to create a triangle:
Yes, that is IT. We create the triangle by defining it as a polygon with 3 corners. This code will create an isosceles triangle with a basis of 40 pixels and a height of 40 pixels, but you can easily imagine how to change it.
I think this is by far the method that allows the most control.
Conclusion
There are a lot of uses for triangles. From arrows to map pins, from menu markers to chart elements.
Now you know how to create a triangle with CSS.
If you liked this tutorial, make sure to check out our Complete How-To Guide for creating and using CSS Circle Images or see how to create a CSS only bar chart in HTML.