Hobo
Из этой заметки вы узнаете, как отобразить двойную стрелку вверх при помощи CSS и HTML. Иногда требуется изобразить на сайте в качестве элемента его дизайна стрелочку. Но для этого совсем не обязательно использовать изображение, достаточно написать небольшой код.
Сначала создадим разметку при помощи HTML.
|
1 2 3 4 5 6 7 8 |
<div class="checkmark"> <div class="line"></div> <div class="line"></div> </div> <div class="checkmark"> <div class="line"></div> <div class="line"></div> </div> |
А теперь, используя стили, завершим работу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.checkmark { /*display: inline-block;*/ position: relative; width: 10px; /* задайте нужную ширину */ height: 20px; /* задайте нужную высоту */ padding-left:130px; } .checkmark .line { position: absolute; width: 3px; /* задайте нужную ширину палочек */ height: 50px; /* задайте нужную высоту палочек */ background-color: #000; /* задайте нужный цвет */ transform-origin: bottom center; } .checkmark .line:first-child { transform: rotate(145deg); /* повернуть первую палочку на 45 градусов */ top: 5px; /* задайте нужное положение по вертикали */ } .checkmark .line:last-child { transform: rotate(-145deg); /* повернуть вторую палочку на -45 градусов */ bottom: -32px; /* задайте нужное положение по вертикали */ } .checkmark + .checkmark { margin-top: 5px; /* задайте нужное расстояние между галками */ } |
Такую стрелку можно использовать, например, для реализации кнопки «Вверх» на сайте. Посмотрите пример, как это выглядит.
Всем WEB!
Если материал оказался полезен и помог решить проблему, можете поддержать автора, направив камеру смартфона на QR-код.
