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

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

HTML:


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

CSS:


.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

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • батмэн

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

    текст меню

    текст

    текст

    текст

    текст

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

    .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;

    }

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

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