Верх страницы
Обложка к записи Треугольник на чистом CSS
Время для прочтения: 0 мин. 4 сек.

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

Для того, чтобы сделать треугольник на чистом CSS достаточно использовать всего один блок

и пару строк стилей.

<div class="arrow-box"></div>

.arrow-box {
	width: 100px;
	height: 50px;
	position: relative;
}
.arrow-box:before {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -12px;
	content: ' ';
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12px 0 12px 8px;
	border-color: transparent transparent transparent #007bff;
}

Результат:

triangle

Советы

IE6 ничего не знает о прозрачности для border, поэтому для него можно применить следующй трюк: задать рамкам розовый цвет и через фильтр chroma сделать их прозрачными.


.arrow-box:before {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -12px;
	content: ' ';
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 12px 0 12px 8px;
	border-color: transparent transparent transparent #007bff;
	_border-color: pink pink pink #007bff; /* IE6 */
  _filter: chroma(color=pink);
	line-height: 0px;
}

Браузер Firefox отрисовывает треугольник с серой рамкой. Исправляется заданием inset для прозрачных сторон рамки.


.arrow-box:before {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -12px;
	content: ' ';
	width: 0px;
	height: 0px;
	border-style: inset solid inset solid; /* FF */
	border-width: 12px 0 12px 8px;
	border-color: transparent transparent transparent #007bff;
	_border-color: pink pink pink #007bff; /* IE6 */
  _filter: chroma(color=pink);
	line-height: 0px;
}

Браузеры на основе движка webkit рендерят треугольник с кривым anti-aliasing. Для них можно применить такой подход: повернуть фигуру на 360 градусов.


.arrow-box:before {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -12px;
	content: ' ';
	width: 0px;
	height: 0px;
	border-style: inset solid inset solid; /* FF */
	border-width: 12px 0 12px 8px;
	border-color: transparent transparent transparent #007bff;
	_border-color: pink pink pink #007bff; /* IE6 */
  _filter: chroma(color=pink);
	line-height: 0px;
	-webkit-transform:rotate(360deg) /* webkit */
}

Чтобы треугольник был поверх блока, но не мешал событиям мыши hover, click, задействуем CCS4 свойство pointer-events.


.arrow-box:before {
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -12px;
	content: ' ';
	width: 0px;
	height: 0px;
	border-style: inset solid inset solid; /* FF */
	border-width: 12px 0 12px 8px;
	border-color: transparent transparent transparent #007bff;
	_border-color: pink pink pink #007bff; /* IE6 */
  _filter: chroma(color=pink);
	line-height: 0px;
	-webkit-transform:rotate(360deg) /* webkit */
	pointer-events: none;
}

See the Pen zjhDo by mihdan (@mihdan) on CodePen.0

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

4 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Виктор
10 лет назад

После приведенной картинки сам текст уже не имеет значения))

батмэн
батмэн
9 лет назад

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

текст меню

текст

текст

текст

текст

/* треугольник*/

.treugol: {}

.treugol:after {

content: »;

position: absolute;

left: 90px; bottom: 10px;

border: 5px solid transparent;

border-top: 5px solid #777;

}

.treugol:hover:after {

border-top: 5px solid #ccc;

}

mihdan
9 лет назад
Ответить на  батмэн

Если честно, то я не совсем понял сути вашего вопроса, выкладывайте код в codepen, например, чтобы видеть о чем речь

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы