Рисуем стрелку на css

"стрелка css" - как нарисовать стрелку на чистом css? Несколько вариантов стрелок в css с примерами.

Стрелки на чистом css

1. Стрелка №1 на css:
2. Поворот стрелки №1
   
   1. Поворот стрелки №1 вверх
   2. Стрелка №1 смотрит влево.
   3. Стрелка №1 смотрит вправо.
   4. Стрелка №1 смотрит вниз.
3. Стрелка css в виде стрелы.
4. Стрелки-треугольники в кружочках
5. Стрелки-треугольники

Стрелка смотрит в правый верхний угол.

Для того, чтобы сделать стрелку на чистом css нам потребуется элемент, который и будет каркасом для нашей стрелки №1 - div.

Стрелку будут формировать :

border-top: 2px solid #000000 !important;
border-right: 2px solid #000000 !important;


Код стрелки №1 в css:

<div class="arrow_example_0"></div>

Css:

<style>

.arrow_example_0 {

width: 15px;

height: 15px;

border-top: 2px solid #000000 !important;

border-right: 2px solid #000000 !important;

margin: 16px 0 0 10px;

display: inline-block;

transition: 1s;

}

</style>

Результат стрелка смотрит в правый верхний угол:

Изменяем размер стрелки смотрит в правый верхний угол

<div class="arrow_example_0" style="width: 26px; height: 26px;"></div>
<div class="arrow_example_0" style="width: 50px; height: 50px;"></div>

2. Поворот стрелки №1

   Для поворота стрелки будем использовать свойство transform с о значением rotate:

   transform: rotate(числоdeg);

   Поворот стрелки №1 вверх

   Для того, чтобы стрелка №1 повернулась вверх, коду css добавляем

   transform: rotate(-45deg);

   <div class="arrow_example" style="width: 50px; height: 50px;"></div>

   .arrow_example {

   width: 15px;

   height: 15px;

   border-top: 2px solid #000000 !important;

   border-right: 2px solid #000000 !important;

   margin: 16px 0 0 10px;

   transform: rotate(-45deg);

   display: inline-block;

   transition: 1s;

   }

   Стрелка №1 смотрит вверх.

   Стрелка №1 смотрит влево.

   Html:

   <div class="arrow_example_1" style="width: 50px; height: 50px;"></div>

   Css:

   .arrow_example_1 {

   width: 15px;

   height: 15px;

   border-top: 2px solid #000000 !important;

   border-right: 2px solid #000000 !important;

   margin: 16px 0 0 10px;

   transform: rotate(-135deg);

   display: inline-block;

   transition: 1s;

   }

   Пример стрелки №1 смотрит влево:

   Стрелка №1 смотрит вправо.

   Html:

   <div class="arrow_example_2" style="width: 50px; height: 50px;"></div>

   Css:

   .arrow_example_1 {

   width: 15px;

   height: 15px;

   border-top: 2px solid #000000 !important;

   border-right: 2px solid #000000 !important;

   margin: 16px 0 0 10px;

   transform: rotate(45deg);

   display: inline-block;

   transition: 1s;

   }

   Пример стрелки №1 смотрит вправо:

   Стрелка №1 смотрит вниз.

   Html:

   <div class="arrow_example_3" style="width: 50px; height: 50px;"></div>

   Css:

   .arrow_example_1 {

   width: 15px;

   height: 15px;

   border-top: 2px solid #000000 !important;

   border-right: 2px solid #000000 !important;

   margin: 16px 0 0 10px;

   transform: rotate(135deg);

   display: inline-block;

   transition: 1s;

   }

   Пример стрелки №1 смотрит вниз:



Стрелка css в виде стрелы.

Следующая стрелка css в виде стрелы:

Html код стрелки в виде стрелы:

<div class="arrow_2">
<div></div>
</div>

Css код стрелки в виде стрелы:

.arrow_2 {

cursor: pointer;

position: relative;

width: 80px;

height: 50px;

margin: 20px auto;

}

.arrow_2 div {

position: relative;

top: 20px;

width: 90px;

height: 10px;

background-color: #000000;

box-shadow: 0 3px 5px rgb(0 0 0 / 20%);

left: 0;

display: block;

}

.arrow_2 div::before {

content: '';

position: absolute;

width: 40px;

height: 10px;

top: 11px;

right: -8px;

background-color: #000000;

box-shadow: 0 3px 5px rgb(0 0 0 / 20%);

transform: rotate(-45deg);

}

.arrow_2 div::after {

content: '';

position: absolute;

width: 40px;

height: 10px;

top: -11px;

right: -8px;

background-color: #000000;

transform: rotate(45deg);

}

:after, :before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}




Стрелки-треугольники в кружочках

Html код стрелки-треугольники в кружочках:

<div class="left-arrow"></div>
<div class="right-arrow"></div>

Css код стрелки-треугольники в кружочках:

.left-arrow,

.right-arrow {

display: inline-flex;

position: relative;

width: 20px;

height: 20px;

background-color: gray;

border-radius: 50%;

cursor: pointer;

}

.left-arrow::before,

.right-arrow::before {

position: absolute;

display: inline-flex;

border: 6px solid transparent;

content: '';

}

.left-arrow::before {

top: 4px;

left: 0;

border-right: 6px solid white;

}

.right-arrow::before {

top: 4px;

right: 0;

border-left: 6px solid white;

}

/* Иземнение фона и цвета при наведении*/

.left-arrow:hover,

.right-arrow:hover {

background-color: lightgray;

}

.left-arrow:hover:before {

border-right: 6px solid gray;

}

.right-arrow:hover:before {

border-left: 6px solid gray;

}




Стрелки-треугольники

Html код стрелки-треугольники:

<div class="left-arrow_2"></div>
<div class="right-arrow_2"></div>

Css код стрелки-треугольники:

.left-arrow_2, .right-arrow_2 {

border: 20px solid transparent;

display: inline-flex;

}

.left-arrow_2 {

border-right: 20px solid gray;

border-left: none;

}

.right-arrow_2 {

border-left: 20px solid gray;

border-right: none;

}