Треугольник

Треугольники через CSS

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Геометрические фигуры на CSS

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

Квадрат

Прямоугольник

Круг

Овал

Треугольник вверх

Треугольник вниз

Треугольник налево

Треугольник направо

Треугольник в левом верхнем углу

Треугольник в правом верхнем углу

Треугольник в левом нижнем углу

Треугольник в правом нижнем углу

Параллелограмм

Трапеция

Звезда (6-конечная)

Звезда (5-конечная)

 #star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after

Пятиугольник

Шестиугольник

#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after

Восьмиугольник

#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after

Сердечко

#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Знак бесконечности

#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Источник

Коды треугольника в html

※ Все символы являются символами Юникода, а не изображением или комбинированными символами. Но вы также можете комбинировать их самостоятельно. ※

символ текста	смысл	Копировать / Вставить
▲	черный треугольник	Копировать
△	белый треугольник	Копировать
▴	черный треугольник, направленный вверх	Копировать
▵	белый треугольник, направленный вверх	Копировать
▶	черный правый треугольник	Копировать
▷	белый правый треугольник	Копировать
▸	черный правый маленький треугольник	Копировать
▹	белый правый маленький треугольник	Копировать
►	черный указатель вправо	Копировать
▻	белый указатель вправо	Копировать
▼	черный треугольник, направленный вниз	Копировать
▽	белый треугольник, направленный вниз	Копировать
▾	черный треугольник, направленный вниз	Копировать
▿	белый треугольник, направленный вниз	Копировать
◀	черный треугольник влево	Копировать
◁	белый треугольник влево	Копировать
◂	черный треугольник влево	Копировать
◃	белый левый маленький треугольник	Копировать
◄	черный указатель влево	Копировать
◅	белый указатель влево	Копировать
◢	черный нижний прямоугольный треугольник	Копировать
◣	черный нижний левый треугольник	Копировать
◤	черный верхний левый треугольник	Копировать
◥	черный верхний правый треугольник	Копировать
◬	белый треугольник с точкой	Копировать
◭	направленный вверх треугольник с левой половиной черного цвета	Копировать
◮	направленный вверх треугольник с правой половиной черного цвета	Копировать
◸	верхний левый треугольник	Копировать
◹	верхний правый треугольник	Копировать
◺	нижний левый треугольник	Копировать
◿	нижний правый треугольник	Копировать

Источник

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

Сегодня мы приготовим не один треугольник в CSS, а целую компанию разных треугольников! Равносторонние, направленные в разные стороны, прямоугольные треугольники — все они будут в нашем арсенале. Итак, поехали!

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

Ингредиены: HTML, CSS

Изюминка процесса: основная роль в создании треугольников отводится CSS свойству border. Поэтому предлагаю вспомнить возможные значения этого свойства:

Ликбез по свойству border

• Толщину границы, например, 5px , 1em и т. д.
• Стиль линии: сплошная solid , прерывистая dashed , точками dotted и т. д. Мы будем использовать сплошную границу solid.
• Цвет границы: цвет может задаваться значениями HTML-кода, rgb или hsl, а также может быть прозрачным. Чтобы установить прозрачный цвет, используется значение transparent.

В итоге граница элемента CSS определяется записью вида:

border: толщина_линии, стиль_линии, цвет.

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

Принцип создания.

Рассмотрим равнобедренный направленный вверх треугольник. Мысленно впишем треугольник в квадрат.

Сразу оговорюсь, что логика в создании CSS треугольников «притянута за уши». Но метод работает! Поэтому, дабы не запутаться в очередности «потягивания ушей», построю ассоциативную связь.Итак, на представленном выше рисунке видно, что основание треугольника совпадает с нижней границей квадрата. Значит, нижней границе зададим максимальную толщину. В моем случае, это 300px:

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

border-left: 150px solid transparent; border-right: 150px solid transparent;

Для верхней границы запишем border-top: 0;

И напоследок, так как квадрат воображаемый, зададим ему нулевые ширину и высоту: width:0; height:0.

Используя описанный выше принцип, потренируемся и создадим на CSS несколько видов треугольников!

Источник

How to create triangle shapes in HTML, SVG & CSS

10 Sep 2012 You’ve seen triangles everywhere: on tooltips, dropdowns and even on loading animations. Like it or not, these triangle shapes are quite important when trying to build some relationships between various UI elements. Everything is a rectangle when working with HTML. But there are different ways to build triangle shapes in HTML, SVG & CSS for your designs and in this article, you’ll see how you can actually do that. View demo

Encoded image

Assuming you already created your custom triangle image and you want to save a valuable HTTP request, then converting it into a Base64 string is the best solution.

Pros

Cons

• You’ll need a tool like Photoshop or Gimp to edit it.
• For larger images, the resulting Base64 string can be quite huge.
• Older browsers like IE6/IE7 do not support this type of encoding.

CSS borders

This is also a pretty common technique used on stuff like tooltips and dropdowns. Together with the above, this is one of my favorite methods for creating small and useful triangles.

Pros

• Easy to update color and size by adjusting some CSS values.
• This is a cross-browser solution.

Cons

• This technique consists of using borders, so you can’t add shadows, gradients and other CSS3 awesomeness.
• Keep in mind that IE6 doesn’t support transparent borders — in case you care about this matter anymore.
• If you’re using Firefox, be aware that CSS’s transparent may not be that transparent, especially on those diagonal borders.

HTML entity

If you read my previous articles, then you’ve seen how this solution works. It’s based on using characters from the available Unicode characters list.

Pros

Cons

• Again, you can’t play too much with CSS3 here, excepting the use of text-shadow .
• It’s quite impossible to achieve pixel perfection across all browsers.

Here’s the official list of character entities: WHATWG’s named character references.

Besides using an entity, if you’re already using an icon font in your project, then you can simply use an arrow symbol from the available ones (in case there is one).

CSS rotated square

Basically, for this technique to work, you’ll need two blocks. But, it’s not mandatory to use two elements, so you can use an element with a pseudo-element for example.

• Create a box. e.g. 100x100px — this one will contain the rotated block.
• Rotate the contained block by 45deg to obtain the diamond shape.
• Shift the diamond shape to the top then set overflow: hidden to the wrapping block to show just the part we’re interested in.
• There you go!

Pros

Cons

HTML5 Canvas

Having the following canvas element in your HTML file:

  id="triangle" height="100" width="100">Triangle 

… here’s how to draw a triangle using JavaScript:

 var canvas = document.getElementById('triangle'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 0); context.lineTo(50, 100); context.closePath(); context.fillStyle = "rgb(78, 193, 243)"; context.fill();

SVG (Scalable Vector Graphics)

This is how you can define an inline SVG triangle in your markup:

  xmlns="http://www.w3.org/2000/svg" class="svg-triangle">  points="0,0 100,0 50,100"/> 

Then, just add some styles:

 .svg-triangle margin: 0 auto; width: 100px; height: 100px; > .svg-triangle polygon  fill:#98d02e; stroke:#65b81d; stroke-width:2; >

Final words

I must admit I haven’t played too much with the last two described in this article: canvas and SVG . This is something I must improve in the future as they are very powerful. Anyways, the truth is that they were made for things greater than just trivial triangles 🙂

Let me know your thoughts about these ways to build triangles, what is the method you often use?

Have any questions or comments about this post?

Email me at [email protected] or ping me on Twitter at @catalinred.

Instagram © 2022 Catalin Rosu. Feel free to use the articles you may find here in your projects, with or without any attribution.

Источник