В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
arrows (2)
css (131)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

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

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

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

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

    Для того, чтобы сделать стрелку на чистом 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>
    1. Поворот стрелки №1

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

      transform: rotate(числоdeg);
    2. Поворот стрелки №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 смотрит вверх.

    3. Стрелка №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 смотрит влево:

    4. Стрелка №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 смотрит вправо:

    5. Стрелка №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 смотрит вниз:


  2. Стрелка 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;

    }


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

    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;

    }


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

    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;

    }

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.020353 секунд. Подробнее