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

Рисуем треугольники

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

Примеры

Как это работает

Когда браузер отрисовывает границы, то делает это особым образом, закрашивая области под углом. Можно воспользоваться этим обстоятельством. Одну сторону границы закрасим в цвет будущего треугольника, а остальные сделаем прозрачными. Затем установим ширину границы, присвоив ему какое-нибудь значение, например, 20 пикселей. А ширину и высоту фигуры сделаем равным 0.

Интересный пример получается, если раскрасить все четыре стороны границы в свой цвет.

.arrow-multicolor {
    border-color: red green blue orange;
    border-style:solid;
    border-width:50px;
    width:0;
    height:0;
}

<div></div>

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

.arrow-acute {
    border-color: red green blue orange;
    border-style:solid;
    border-width:25px 10px 15px 30px;
    width:0;
    height:0;
}

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

.arrow {
  width: 0; height: 0;
  border: 50px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;
}

Левую часть укажем прозрачной.

.arrow {
  width: 0; height: 0;
  border: 50px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: transparent;
}

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

.arrow {
    width: 0; height: 0;
    border: 100px solid;
    border-color: transparent;
    border-bottom-color: blue;
}

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

border-style:ridge;

border-style:groove;

border-style:double;

Speech bubble

Технику создания треугольников можно использовать для создания красивых окошек, как в комиксах. Рисуются две фигуры и накладываются друг на друга в нужном месте:

Привет! Как дела?

Это окошко создано без использования картинок!

<div>
    Привет! Как дела?
    <div></div>
    <div></div>
</div>

.chat-bubble {
    background-color:#EDEDED;
    border:2px solid #666666;
    font-size:35px;
    line-height:1.3em;
    margin:10px auto;
    padding:10px;
    position:relative;
    text-align:center;
    width:300px;
    border-radius:10px;
    box-shadow:0 0 5px #888888;
}

.  chat-bubble-arrow-border {
    border-color: #666666 transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:-22px;
    left:30px;
}

.chat-bubble-arrow {
    border-color: #EDEDED transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:-19px;
    left:30px;
}

Другой универсальный вариант

Базовая разметка:

<div>Hello Kitty</div>

Стиль

.speech-bubble {
    position: relative;
    background-color: #e3e3e3;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}

Результат

Hello Kitty

Теперь нарисуем стрелку-треугольник в нужном месте. Для начала цветной квадратик:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}

Hello Kitty

Оставляем только четверть квадратика:

.speech-bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
    border-top-color: red;
}

Hello Kitty

Теперь перемещаем ниже и закрашиваем. Закругляем углы у сообщения:

.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
    border-top-color: #292929;
    top: 100%;
    left: 50%;
    margin-left: -15px; /* adjust for border width */
}

Hello Kitty

Поняв принцип, можно размещать треугольник с любой стороны.

/*
   Укажите класс .speech-bubble и .speech-bubble-DIRECTION
   
Hello Kitty
*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}
 
/* Position the Arrow */
 
.speech-bubble-top:after {
  border-bottom-color: #292929;
 
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.speech-bubble-bottom:after {
  border-top-color: #292929;
 
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.
  speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Hello Kitty

Hello Kitty

Hello Kitty

Hello Kitty

При использовании line-height при вертикальном центрировании мы получаем ограничение текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell

.speech-bubble {
    /* other styles */
    display: table;
}
.speech-bubble p {
    display: table-cell;
    vertical-align: middle;
}

Дополнительные материалы

CSS Triangle | CSS-Tricks

Реклама

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

Основы Unreal Engine 5

Пройдя курс:

— Вы получите необходимую базу по Unreal Engine 5

— Вы познакомитесь с множеством инструментов в движке

— Вы научитесь создавать несложные игры

Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Не гоняйся за счастьем: оно всегда находится в тебе самом.

Пифагор

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

1-й способ

Создание простого изображения со стрелкой (например, вырезка из дизайна). Этот способ я сам постоянно использую, и знаю, что он является самым-самым популярным, и в некоторых случаях единственным. Но здесь есть большой минус, если делать прозрачные места у треугольника, то надо использовать PNG, который IE6 не поддерживает. А если брать

2-й способ

Этот способ уже использует чистый CSS, он очень простой, но красивые уголки (например, с тенями, градиентами, с какими-нибудь сложными рисунками) на нём не сделаешь:

Далее к обычному блоку div можно применить класс triangle, в результате данный блок станет стрелкой чёрного цвета (#000). Размеры можно регулировать через свойство border-width. Вот об этом способе многие из Вас даже не слышали, поэтому если стрелка простенькая, то это наилучший способ.

Другие способы

Время от времени я с ними сталкиваюсь, но сам не использую их, поскольку ни один из них не является кроссбраузерным. Все они используют

• Создано 15.10.2012 08:41:58
• Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

Вывод:

03 03 03 03

Использование псевдоклассов :even и :odd с элементами списка в CSS

Related Articles

Triangles in CSS - Growing with the Web

Published 11 March 2013 , updated 28 June 2015

Tags:

• CSS
• Design
• HTML
• Sass

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

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

Допустим, мы строим треугольник, чтобы использовать его как стрелку вверх, первое, что нужно сделать, это создать элемент размером 0x0. Затем к элементу применяется нижняя граница с цветом, заданным как цвет треугольника. Затем добавьте к элементу левую и правую границы с прозрачным цветом.

 .треугольник {
  нижняя граница: 15px сплошная #000;
  граница слева: 10px сплошная прозрачная;
  граница справа: 10px сплошная прозрачная;
  ширина: 0;
  высота: 0;
}
 

Вот результат:

Почему он получился в таком виде? Три треугольника в треугольнике на самом деле являются границами .triangle . Треугольники 10x15px слева и справа и треугольник 20x15px внизу.

 .треугольник::после {
  нижняя граница: 15px сплошная #000;
  граница слева: 10px сплошная прозрачная;
  граница справа: 10px сплошная прозрачная;
  ширина: 0;
  высота: 0;
  содержание: "";
  дисплей: блок;
}
 

 
Некоторый текст во всплывающем окне
 

 .всплывающее {
  цвет фона: #7FF;
  положение: родственник;
  отображение: встроенный блок;
  заполнение: .2em .5em;
}
.popup:: после {
  нижняя граница: 10px сплошная #7FF;
  граница слева: 10px сплошная прозрачная;
  граница справа: 10px сплошная прозрачная;
  ширина: 0;
  высота: 0;
  содержание: "";
  дисплей: блок;
  положение: абсолютное;
  низ: 100%;
  слева: 1эм;
}
 

 .