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

Результат:

Советы

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.

Ссылки

• CSS генератор треугольников
• CSS свойство pointer-events

CSS HTML