Главная » Рецепты CSS » Как создать указатель-треугольник на чистом CSS

Как создать указатель-треугольник на чистом CSS

2014-06-15 / Вр:22:39 / просмотров: 6776

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

А также в комментариях:

Итак, создадим треугольник в CSS через «border» двумя способами:
1 способ – с помощью цвета совпадающего с фоном сайта;
2 способ - с помощью прозрачных сторон.

Создать треугольник с помощью border

Способ №1

Чтобы задать треугольник с помощью «border», нужно указать:

толщину границы 20px (border-width:20px);
цвет четырех сторон (border-color: blue red green black);
стиль рамки (border-style:solid);
ширину и высоту со значением "0" (width:0; height:0;)

Пример:

<html>
 <head>
 <title>Создать треугольник с помощью border на BlogGood.ru</title>
 <style>
 .treygolnik-na-bloggod-ru {
  border-color: blue red green black;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 </style>
 </head>
 <body>
 <div class="treygolnik-na-bloggod-ru"></div>
 </body>
</html>

Результат:

Создать треугольник с помощью border

Теперь три стороны сделаем таким же цветом, как фон сайта, а одну оставим черным цветом.

Пример:

<html>
 <head>
 <title>Создать треугольник с помощью border на BlogGood.ru</title>
 <style>
 .treygolnik-na-bloggod-ru {
  border-color: white white white black;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 </style>
 </head>
 <body>
 <div class="treygolnik-na-bloggod-ru"></div>
 </body>
</html>

Результат:

Способ №2

Чтобы задать треугольник с помощью «border», нужно указать:

Пример:

<html>
 <head>
 <title>Создать треугольник с помощью border на BlogGood.ru</title>
 <style>
 .treygolnik-na-bloggod-ru {
  border-color: blue red green black;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 </style>
 </head>
 <body>
 <div class="treygolnik-na-bloggod-ru"></div>
 </body>
</html>

Результат:

Создать треугольник с помощью border

Теперь три стороны сделаем прозрачными с помощью «transparent», а одну оставим черным цветом.

Пример:

<html>
 <head>
 <title>Создать треугольник с помощью border на BlogGood.ru</title>
 <style>
 .treygolnik-na-bloggod-ru {
  border-color: transparent transparent transparent black;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}
 </style>
 </head>
 <body>
 <div class="treygolnik-na-bloggod-ru"></div>
 </body>
</html>

Результат:

Если вы задаетесь вопросом, почему я написал вам первый способ, если второй более правильный, то я отвечу, что это на тот случай, если какой-то браузер, типа Internet Explorer не поймет сделанный вами трюк с прозрачностью «transparent».

Таблица возможных видов треугольников:

Вид	Стиль
	border: 20px solid transparent; border-top: 20px solid black;
	border: 20px solid transparent; border-right: 20px solid black;
	border: 20px solid transparent; border-bottom: 20px solid black;
	border: 20px solid transparent; border-left: 20px solid black;
	border: 20px solid transparent; border-top: 20px solid black; border-right: 20px solid black;
	border: 20px solid transparent; border-right: 20px solid black; border-bottom: 20px solid black;
	border: 20px solid transparent; border-bottom: 20px solid black; border-left: 20px solid black;
	border: 20px solid transparent; border-left: 20px solid black; border-top: 20px solid black;