Треугольники css: Треугольники через CSS | htmlbook.ru

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

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

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

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

 <div></div>

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

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

.triangle-top {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #f95959;
}

.triangle-bottom {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 200px solid #f95959;
}

.triangle-left {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-right: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

 . triangle-right {
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 200px solid #5cb85c;
    border-bottom: 100px solid transparent;
}

.triangle-top-left {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-right: 200px solid transparent;
}

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 200px solid #f0ad4e;
    border-left: 200px solid transparent;
}

.triangle-bottom-left {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-right: 200px solid transparent;
}

. triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 200px solid #5bc0de;
    border-left: 200px solid transparent;
}

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

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

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

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

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

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

25.04.2022

3781

Примеры как сделать различные вариации треугольников с помощью CSS-свойства border.

1

/* Направленный вверх */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-bottom: 30px solid orange;
}

CSS

/* Направленный вниз */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-top: 30px solid orange;
}

CSS

/* Направленный влево */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-right: 30px solid orange;
}

CSS

/* Направленный вправо */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-left: 30px solid orange;
}

CSS

/* Левый верхний угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-right: 40px solid transparent;
}

CSS

/* Верхний правый угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-left: 40px solid transparent;
}

CSS

/* Нижний правый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-left: 40px solid transparent;
}

CSS

/* Нижний левый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-right: 40px solid transparent;
}

CSS

2

/* Направленный вверх */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-bottom: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -24px;
	left: -26px;
	border: 26px solid transparent;
	border-bottom: 26px solid #fff;
}

CSS

/* Направленный вниз */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-top: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -28px;
	left: -26px;
	border: 26px solid transparent;
	border-top: 26px solid #fff;
}

CSS

/* Направленный влево */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-right: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -26px;
	left: -24px;
	border: 26px solid transparent;
	border-right: 26px solid #fff;
}

CSS

/* Направленный вправо */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-left: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -26px;
	left: -28px;
	border: 26px solid transparent;
	border-left: 26px solid #fff;
}

CSS

/* Левый верхний угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-right: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -38px;
	left: 2px;
	border-top: 33px solid #fff;
	border-right: 33px solid transparent;
}

CSS

/* Верхний правый угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-left: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -38px;
	left: -35px;
	border-top: 33px solid #fff;
	border-left: 33px solid transparent;
}

CSS

/* Нижний правый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-left: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: -35px;
	border-bottom: 33px solid #fff;
	border-left: 33px solid transparent;
}

CSS

/* Нижний левый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-right: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 2px;
	border-bottom: 33px solid #fff;
	border-right: 33px solid transparent;
}

CSS

25. 04.2022

3781

#Background #Border #CSS

Другие публикации

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который…

Подменю в dropdown Bootstrap

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

Блокировка многократной отправки формы

Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы…

jQuery UI Slider

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

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

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

Использование границы

Это «классический» способ рисования треугольника в CSS, и он кажется самым популярным на сегодняшний день. Он состоит из одной цветной рамки, а остальные остаются прозрачными. Вот шаги для достижения этого:

1. Установить ширину и высоту из 0.
2. Установите прозрачный цвет границы.
3. Установить верхнюю границу на 0.
4. Установите боковые границы на половину ширины.
5. Установить нижнюю границу на полную высоту.
6. Установите цвет нижней границы.

Это может показаться непростым, но это относительно просто:

В зависимости от того, куда должен указывать треугольник, вы настроите соответствующие размеры и цвета границ.

Этот метод появился давно и является «хаком». Он работает во всех браузерах и продолжит работать в будущих браузерах, но это не то, для чего предполагалось использовать границы.

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

Плюсы этого метода:

• Поддержка: работает во всех браузерах (даже в старых версиях IE)
• Простой: его легко запрограммировать, как показано в примере выше.

Минусы этого метода:

• Сложно поддерживать: изменение размера требует изменения кода.
• Жесткий дизайн: если мы добавим контент, результат, скорее всего, будет не таким, как ожидалось.

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

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

Мы могли бы использовать встроенный SVG в CSS, который бы работал нормально… но это был бы обман , так как мы использовали бы изображение вместо CSS.

Вместо этого давайте создадим треугольник, используя background-image , но без фактического изображения. Мы можем добиться этого, добавив два линейных градиента. По одному на каждую сторону треугольника.

Идея заключалась в следующем:

1. Добавить линейный градиент в направлении нижнего правого угла (прозрачный до красного с жестким изменением на 50%)
2. Добавить линейный градиент к правому верхнему углу (от красного до прозрачного с жестким изменением на 50%)
3. Установите размер обоих linear-gradient на 50% ширины
4. Разместите один linear-gradient в начале и другой в конце контейнера.

Звучит сложнее, чем границы! И не буду врать, есть. .. но не сильно. Вот схема того, как это выглядит:

. Результат графически похож на треугольник, созданный с границами:

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

Кроме того, поскольку контейнер по-прежнему представляет собой прямоугольник, форматирование, позиционирование и стиль текста внутри треугольной формы являются более «естественными».

Плюсов этого метода:

• Поддержка: работает даже в старых браузерах (IE10 и выше)
• Адаптивный: подстраивается под размер контейнера.
• Идеально подходит для текста: форма контейнера не изменяется, поэтому добавление текста или другого содержимого не вызывает затруднений.

Минусы этого метода:

• Сложность: этот вариант, пожалуй, самый сложный для разработки.
• Сложно для вариантов: иметь, например, линейный градиент сложнее (но выполнимо)

Используя

clip-path является «последним» из трех. И я поставил «последний» между кавычками, потому что он поддерживается более 10 лет в Firefox и Chrome (с префиксом), и его поддержка началась примерно в то же время, что и linear-gradient() .

С помощью clip-path вы можете определить раздел отсечения, который будет единственной видимой частью элемента. Чтобы нарисовать треугольник, нам нужно только определить многоугольник с тремя точками, как на изображении:

Код для достижения этого невероятно прост благодаря функции polygon() . Нам нужны только нижние левые (0% 100%), центральные верхние (50% 0%) и нижние правые (100% 100%) координаты, и все готово!

Важно помнить, что все, что находится за пределами обрезанной области, в основном исчезло . И это включает не только содержимое, но и «внешние» элементы, такие как тени, контуры или границы. (У Адама Куна есть отличное решение этой проблемы.)

Многоугольники — это только верхушка айсберга: круги, эллипсы, а с последней поддержкой path() , в принципе, любая форма, которую вы можете себе представить, возможна с clip-path .

Плюсы этого метода:

• Простота: clip-path меняет правила игры для CSS. Он мощный и универсальный, допускающий любую форму, а не только треугольники.
• Адаптивный: подстраивается под размер контейнера и его изменения.
• Настраиваемый: градиенты и эффекты не проблема, если они в видимой области .

Минусы этого метода:

• Поддержка: ни одна версия IE не поддерживает clip-path . Не все функции поддерживаются повсеместно (хотя polygon() есть).
• «Возможность ошибок»: все, что находится за пределами отсеченной области, исчезло, что может привести к неожиданным результатам.

Заключение

CSS со временем улучшился и теперь предоставляет инструменты для рисования — например clip-path или background-image — для создания треугольников (или фигур), которые проще, гибче и проще в обслуживании, чем использование границ.

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

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

Мы перешли от макетов таблиц к плавающим контейнерам, а затем от плавающих контейнеров к Flexbox и Grid. Имеет смысл перейти от использования границ к новым методам, более подходящим для этой работы.

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

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 10 июн, 2022

Улучшить статью

Сохранить статью

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

Подход: Чтобы создать треугольник, в части HTML мы должны просто добавить один div для каждого треугольника. Идея состоит в том, чтобы создать коробку без ширины и высоты. Ширина границы определяет фактическую ширину и высоту треугольника. Например, нижняя граница треугольника со стрелкой вверх окрашена, а левая и правая границы прозрачны, образуя треугольник. Чтобы сделать треугольники со стрелкой внизу, со стрелкой влево и со стрелкой вправо, мы должны сохранить цвет верхней границы, правой границы и левой границы соответственно.

Используемое свойство (основная роль):

• border-top : Это свойство CSS используется для добавления границы вверху элемента, оно принимает значение ширины границы и цвета. границы.
• border-left : Это свойство CSS используется для добавления границы с левой стороны элемента, оно принимает значение ширины границы и цвет границы.
• border-right : Это свойство CSS используется для добавления границы с правой стороны элемента, оно принимает значение ширины границы и цвет границы.
• border-bottom : Это свойство CSS используется для добавления границы внизу элемента, оно принимает значение ширины границы и цвет границы.

Пример ниже демонстрирует описанный выше подход.

Пример 1: В приведенном ниже коде border-bottom свойство используется для создания треугольника u p-стрелки .

HTML

Выход:

Пример 2: в приведенном ниже коде .

HTML