Треугольник на чистом 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

Ссылки

Источник: https://www.kobzarev.com/makeup/css-triangle/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: