BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

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

Способ №1

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

толщину границы 20px (border-width:20px);
цвет четырех сторон (border-colorblue 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>

Результат:

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

Способ №2

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

толщину границы 20px (border-width:20px);
цвет четырех сторон (border-colorblue red green black);
стиль рамки (border-style:solid);
ширину и высоту со значением "0" (width:0height: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

Теперь три стороны сделаем прозрачными с помощью «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>

Результат:

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

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

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

Вид Стиль
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-top: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-right: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-bottom: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-left: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-top: 20px solid black;
border-right: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-right: 20px solid black;
border-bottom: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-bottom: 20px solid black;
border-left: 20px solid black;
 Как создать указатель-треугольник на чистом CSS border: 20px solid transparent;
border-left: 20px solid black;
border-top: 20px solid black;

Надеюсь, статья была полезной и интересной. Дайте мне знать, понравилась ли вам статья, жмите на кнопку социальных сетей.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Маргарита

    Спаибо, интересное решение.

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки:

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716