Рисуем стрелку на css
Стрелки на чистом css
- Стрелка №1 на css:
- Поворот стрелки №1
- Стрелка css в виде стрелы.
- Стрелки-треугольники в кружочках
- Стрелки-треугольники
-
Поворот стрелки №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 нам потребуется элемент, который и будет каркасом для нашей стрелки №1 - div.
Стрелку будут формировать :
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>
Результат стрелка смотрит в правый верхний угол:
Изменяем размер стрелки смотрит в правый верхний угол
Стрелка css в виде стрелы.
Следующая стрелка css в виде стрелы:
Html код стрелки в виде стрелы:
<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="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="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;
}
стрелка css
css стрелка вниз
стрелки html css
css слайдер стрелки
как сделать стрелку в css
css стрелка вправо
css кнопки стрелки
css нарисовать стрелку
css стрелка вверх
css код стрелки
css стрелка after
css стрелки влево
стрелка css before
css стрелка вниз after

подробнее.
подробнее.