Треугольник

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

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

Закрашенные треугольники

/* Направленный вправо */ span

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

Треугольники с рамкой

/* Направленный вверх */ span < display: inline-block; border: 30px solid transparent; border-bottom: 30px solid orange; position: relative; >span:after

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

/* Направленный влево */ span < display: inline-block; border: 30px solid transparent; border-right: 30px solid orange; position: relative; >span:after

/* Направленный вправо */ span < display: inline-block; border: 30px solid transparent; border-left: 30px solid orange; position: relative; >span:after

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

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

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

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

Комментарии

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

CSS dropdown menu with top triangle

The following tutorial shows you how to use CSS to do «CSS dropdown menu with top triangle».

CSS Style

The CSS style to do «CSS dropdown menu with top triangle» is

nav !-- w ww . d e m o2 s . c o m--> background-color:black; font-family:sans-serif; text-align:center; > nav ul, nav li < list-style:none; padding:0; margin:0; > nav a < text-decoration:none; color:white; > nav a:hover < color:yellow; > nav>ul < display:flex; justify-content:center; > nav>ul>li < position:relative; > nav>ul>li>a < display:block; padding:10px 20px; > nav>ul>li>ul < display:none; white-space:nowrap; position:absolute; left:50%; transform:translateX(-50%); padding-top:15px; > nav>ul>li>ul>li>a < display:block; padding:10px 20px; background-color:black; border-bottom:1px solid darkgray; > nav>ul>li>ul:after < position:absolute; left:50%; transform:translateX(-50%); top:5px; width:0; height:0; content:''; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid black; > nav>ul>li:hover>ul < display:block; >

HTML Body

body> nav> ul> li> a href="#">Dropdown1 ul> li>a href="#">Option1  li>a href="#">Option2 A Long One  li>a href="#">Option3    li> a href="#">Dropdown2 ul> li>a href="#">Option1  li>a href="#">Option2  li>a href="#">Option3    li> a href="#">Dropdown3 ul> li>a href="#">Option1  li>a href="#">Option2  li>a href="#">Option3     !-- w w w . d e m o 2 s . c o m -->   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> nav !-- w w w . d e m o 2 s .c o m--> background-color: black; font-family: sans-serif; text-align: center; > nav ul, nav li < list-style: none; padding: 0; margin: 0; > nav a < text-decoration: none; color: white; > nav a:hover < color: yellow; > nav>ul < display: flex; justify-content: center; > nav>ul>li < position: relative; > nav>ul>li>a < display: block; padding: 10px 20px; > nav>ul>li>ul < display: none; white-space: nowrap; position: absolute; left: 50%; transform: translateX(-50%); padding-top: 15px; > nav>ul>li>ul>li>a < display: block; padding: 10px 20px; background-color: black; border-bottom: 1px solid darkgray; > nav>ul>li>ul:after < position: absolute; left: 50%; transform: translateX(-50%); top: 5px; width: 0; height: 0; content: ''; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; > nav>ul>li:hover>ul < display: block; >  body> nav> ul> li> a href="#">Dropdown1 ul> li>a href="#">Option1  li>a href="#">Option2 A Long One  li>a href="#">Option3    li> a href="#">Dropdown2 ul> li>a href="#">Option1  li>a href="#">Option2  li>a href="#">Option3    li> a href="#">Dropdown3 ul> li>a href="#">Option1  li>a href="#">Option2  li>a href="#">Option3        

Related

• CSS Dropdown menu with only CSS
• CSS Dropdown menu with only CSS (Demo 2)
• CSS Dropdown Menu with Submenu CSS HTML
• CSS dropdown menu with top triangle
• CSS Dropdown menu with transition
• CSS Dropdown menu with transition (Demo 2)
• CSS dropdown menu without borders

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

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

Источник

Меню с треугольником css

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

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

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

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

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

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

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

         
Глокая куздра штеко будланула бокра и кудрячит бокрёнка.
    

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

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

Источник