Как сделать треугольник на css
Перейти к содержимому

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

  • автор:

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

Свойство border-width нельзя устанавливать в процентах.

Генератор треугольника с border

  

border-radius : с закруглёнными углами

  

clip-path : обрезать HTML-элемент

Можно делать адаптивные треугольники любой формы с любой фоновой картинкой, но пока поддержка браузеров хромает.

Генератор треугольника с clip-path

  

shape-inside : текст в треугольнике

С shape-outside , внешний текст будет обтекать элемент. Лучше использовать свойство shape-inside , но оно не имеет поддержки в браузерах.

  
текст

linear-gradient в background : фон наполовину

Генератор треугольника с background

  

linear-gradient в mask : наложить маску на HTML-элемент

Обрезает всё, выходящее за рамки треугольника. Можно делать адаптивные треугольники с любым фоном и любой формы, если вместо linear-gradient использовать SVG, но пока поддержка браузеров хромает.

Генератор треугольника с mask

  

Символ треугольника

Точные размеры не узнать: зависят от шрифта и браузера.

  

Резиновый треугольник SVG

Одна из самых простых фигур, которой достаточно поля 2 на 2.

Генератор треугольника с SVG

width="7em" height="7em" viewBox vydelit">0 0 2 2" preserveAspectRatio="none"> width и/или height можно задать в процентах --> 0,0 2,0 1,2"/> 
  • Как сделать круг в CSS
  • Как сделать полукруг в CSS

Kliwi Ru Просто потрясающе сколько труда вы в один пост вкладываете. NMitra Ох, да. Стараюсь сделать так, чтобы потом самой было в удовольствие пользоваться.

Делаем CSS треугольники

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

Когда видите этот треугольник, вы обычно думаете что это картинка. Можно ли сделать такие треугольники с помощью CSS? Ответ &madsh; да, и метод создания CSS-треугольников в основном использует CSS-свойство border .

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

Во-первых, давайте взглянем на обычный код c CSS border . Сделаем контейнер с шириной и высотой по 100 пикселей, у которого все границы будут разного цвета, шириной по 10 пикселей.

.box_1

Теперь увеличим ширину границ до 120 пикселей. В зависимости от значения свойства box-sizing это будет выглядеть так

.box_1 < width: 100px; height: 100px; margin: 20px auto; border-top: 120px solid red; border-right: 120px solid lime; border-bottom: 120px solid blue; border-left: 120px solid yellow; box-sizing: content-box; >
.box_1 < width: 100px; height: 100px; margin: 20px auto; border-top: 120px solid red; border-right: 120px solid lime; border-bottom: 120px solid blue; border-left: 120px solid yellow; box-sizing: border-box; >

И это будет то, что надо. Оставляем box-sizing: border-box . Теперь из получившихся четырёх треугольников оставляем один, например красный ( border-top ).

Для этого цвет остальных делаем прозрачным, используем для этого значение rgba(0,0,0,0) .

.box_1 < width: 100px; height: 100px; margin: 20px auto; border-top: 120px solid red; border-right: 120px solid rgba(0,0,0,0); border-bottom: 120px solid rgba(0,0,0,0); border-left: 120px solid rgba(0,0,0,0); box-sizing: border-box; >

Теперь можно настроить размеры треугольника, изменим ширину верхней, правой и левой границ, а нижнюю совсем уберём.

.box_1 < width: 100px; height: 100px; margin: 20px auto; border-top: 175px solid red; border-right: 75px solid rgba(0,0,0,0); border-bottom: none; border-left: 75px solid rgba(0,0,0,0); box-sizing: border-box; >

Или использовать границу слева, чтобы повернуть треугольник:

.box_1 < width: 100px; height: 100px; margin: 20px auto; border-top: 75px solid rgba(0,0,0,0); border-right: none; border-bottom: 75px solid rgba(0,0,0,0); border-left: 175px solid yellow; box-sizing: border-box; >

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

верхний правый угол

Всем привет! Раньше верстальщики практически все элементы дизайна вырезали в Фотошопе из PSD макета, в том числе и треугольники – маленькие и больше, – неважно. Просто не было возможности прописать их кодом. Сейчас HTML5 повелевает отрабатывать свои навыки в CSS3 и с его помощью создавать любую фигуру.

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

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

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

Затем в CSS файл скопируйте код с выбранным классом.

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

.triangle-top

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

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

.triangle-bottom

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

.triangle-left

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

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

.triangle-right

Верхний левый угол

.triangle-top-left

Верхний правый угол

верхний правый угол

.triangle-top-right

Нижний левый угол

нижний левый угол

.triangle-bottom-left

Нижний правый угол

.triangle-bottom-right

Сначала непонятно, причем тут border.. но немного практики и все становится на свои места.

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

Как много фигур можно создать с помощью CSS, для любителей кода это очень увлекательное занятие! А потом бы еще сделать анимацию… Буду развивать направление рисунков и анимации в CSS и JS.

Надеюсь, вам было интересно? �� Пока!

Голосов: 6 , Средняя оценка: 4.7

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

В данной статье приведены интересные варианты, как можно сделать треугольник средствами CSS.

Треугольники и уголки с помощью CSS

Делать уголки с помощью свойства border очень удобно – не нужно рисовать картинки в графическом редакторе, и вы всегда можете легко изменить параметры фигуры.
Делается все очень просто – через комбинацию разной ширины border. Чтобы понять, как это работает, достаточно создать пустой элемент нулевой ширины и высоты с толстой обводкой разного цвета с каждой стороны.

CSS этого элемента:

1 2 3 4 5 6
border-top: 25px solid rgb(97, 236, 130); border-bottom: 25px solid rgb(114, 147, 168); border-right: 25px solid aqua; border-left: 25px solid green; width: 0; height: 0;

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

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

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

1 2 3 4 5
border: 30px solid transparent; border-right: 43px solid rgb(255, 68, 0); display: block; width: 0; height: 0;

Приплющенный треугольник влево

1 2 3 4 5
border: 30px solid transparent; border-right: 30px solid aqua; display: block; width: 0; height: 0;

Вытянутый треугольник влево

1 2 3 4 5
border: 30px solid transparent; border-right: 80px solid aqua; display: block; width: 0; height: 0;

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

1 2 3 4 5 6
border: 30px solid transparent; border-left: 30px solid aqua; border-bottom: 30px solid aqua; display: block; width: 0; height: 0;

Приплющенный треугольник прямой угол влево

1 2 3 4
border: 40px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; border-left: 80px solid rgb(119, 39, 32);

Вытянутый треугольник прямой угол влево

1 2 3 4
border: 40px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; border-left: 20px solid rgb(119, 39, 32);

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

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

1 2 3 4 5
border: 30px solid transparent; border-left: 43px solid rgb(255, 68, 0); display: block; width: 0; height: 0;

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

1 2 3 4 5
border: 30px solid transparent; border-top: 43px solid rgb(255, 68, 0); display: block; width: 0; height: 0;

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

1 2 3 4 5
border: 30px solid transparent; border-bottom: 43px solid rgb(255, 68, 0); display: block; width: 0; height: 0;

Таким образом можно делать уголки для всплывающих подсказок и еще много красивостей. Чтобы прикрепить треугольник к блоку, можно воспользоваться псевдоэлементами :before или :after.

Popup с уголком слева

Popup с уголком слева

Стили этого всплывающего окна:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
.popup-left-corner { background: rgb(173, 208, 247); border-radius: 5px; -moz-border-radius: 5px; position: relative; /* . */ padding: 5px; margin-left: 9px; width: 300px; text-align: center; box-shadow: 1px 1px 3px 0px black; } .popup-left-corner:before { content: ''; border: 10px solid transparent; border-right: 10px solid rgb(173, 208, 247); position: absolute; left: -20px; top: 50%; margin-top: -10px; }

Псевдоэлемент :before, в котором находится стрелочка, спозиционирован абсолютно, отрицательный left сдвигает его на его ширину, чтобы выйти за рамки основного блока, позиция top дает отступ в 50% от высоты блока, а отрицательный margin-top отодвигает вверх на половину его высоты, чтобы стрелочка стояла всегда ровно по центру по вертикали.

Popup с уголком справа

Popup с уголком справа

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
.popup-right-corner { background: rgb(231, 191, 230); border-radius: 5px; -moz-border-radius: 5px; position: relative; padding: 5px; margin-left: 9px; width: 300px; text-align: center; box-shadow: 0px 1px 3px 1px rgb(171, 141, 141); } .popup-right-corner:after { content: ''; border: 8px solid transparent; border-left: 9px solid rgb(231, 191, 230); position: absolute; right: -17px; top: 50%; margin-top: -8px; }

Popup уголок сверху

Popup с уголком сверху

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
.popup-top-corner { background: rgb(200, 200, 200); border-radius: 5px; border-top: 3px solid rgb(145, 27, 54); -moz-border-radius: 5px; position: relative; padding: 5px; width: 300px; text-align: center; margin-top: 10px; } .popup-top-corner:before { content: ''; border: 12px solid transparent; border-bottom: 12px solid rgb(145, 27, 54); position: absolute; left: 50%; margin-left: -12px; top: -27px; width: 0; }

Popup уголок снизу

Popup с уголком снизу

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
.popup-bottom-corner { background: rgb(190, 231, 209); border-radius: 5px; -moz-border-radius: 5px; position: relative; padding: 5px; width: 300px; text-align: center; margin-bottom: 10px; } .popup-bottom-corner:after { content: ''; border: 12px solid transparent; border-top: 12px solid rgb(190, 231, 209); position: absolute; left: 50%; margin-left: -12px; bottom: -24px; width: 0; }

Треугольник с обводкой

Для создания треугольника с обводкой используем уже два псевдоэлемента – :before и :after.

Popup двойной обводкой

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
.popup-duble-corner { background: rgb(191, 192, 245); border: 3px solid rgb(114, 71, 148); border-radius: 5px; -moz-border-radius: 5px; position: relative; padding: 5px; width: 300px; text-align: center; margin-bottom: 10px; } .popup-duble-corner:after, .popup-duble-corner:before { content: ''; border: solid transparent; position: absolute; left: 50%; margin-left: -12px; bottom: -27px; width: 0; } .popup-duble-corner:before { border-top-color: rgb(114, 71, 148); border-width: 12px; } .popup-duble-corner:after { border-top-color: rgb(191, 192, 245); border-width: 16px; margin-left: -16px; }

Ну и конечно же, комбинацией псевдоэлементов :before и :after можно сделать много всяких красивых стрелочек (главное, не забывать ставить position: relative для родительского элемента, чтобы псевдоэлементы не уехали):

Мы все без backgrounda!

Как видите, все достаточно просто! А использование css3-свойств в сочетании с псевдоэлементами еще больше расширяет возможности «бескартиночного» оформления сайта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *