Как сделать стрелочки в css
Как сделать стрелочки в css
В этом подборке собран оригинальный дизайн стрелок CSS для всех интернет сайтов не смотря какая у них тематика Все конструкции CSS-стрелок в этом списке просты и имеют эффекты метеорной анимации, чтобы привлечь внимание пользователя за короткий промежуток времени.
HTML и CSS примеры анимированных стрелок
.satedopyved <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80px;
height: 60px;
cursor: pointer;
>
На этом все, когда наводите курсор на стрелку, то она начинает двигаться правую и левую сторону.
Эти простые прямые стрелки можно использовать в любой части сайта. Эти анимированные стрелки можно использовать как для маленьких виджетов, так и для больших слайдеров изображений. В демонстрационной версии по умолчанию для эффекта наведения используется оранжевая цветовая схема.
.dekipem <
position: absolute;
top: 50%;
width: 3vmin;
height: 3vmin;
background: transparent;
border-top: 1vmin solid white;
border-right: 1vmin solid white;
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
>
.left <
left: 0;
transform: translate3d(0,-50%,0) rotate(-135deg);
>
.right <
right: 0;
transform: translate3d(0,-50%,0) rotate(45deg);
>
.dekipem:before <
content: »;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%,-60%) rotate(45deg);
width: 200%;
height: 200%;
>
Вы можете изменить его на нужный вам цвет в зависимости от вашего дизайна. Не только дизайн, но и сценарий кода также поддерживается в чистоте, так что его настройка не займет много времени.
Так как это общий дизайн, вы можете использовать их как на личных, так и на деловых сайтах. Сделав несколько оптимизаций, вы можете использовать эти стрелки на своих пользовательских сайтах.
.wrapper <
margin-top: 200px;
width: 150px;
float: left;
>
.triangle.up <
border: 1px solid #000;
border-width: 0 0 2px 2px;
width: 50px;
height: 50px;
line-height: 0;
font-size: 0;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
>
.triangle.right <
border: 1px solid #000;
border-width: 0 0 2px 2px;
width: 50px;
height: 50px;
line-height: 0;
font-size: 0;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
>
.triangle.down <
border: 1px solid #000;
border-width: 0 0 2px 2px;
width: 50px;
height: 50px;
line-height: 0;
font-size: 0;
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-45deg);
>
.triangle.left <
border: 1px solid #000;
border-width: 0 0 2px 2px;
width: 50px;
height: 50px;
line-height: 0;
font-size: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
>
Следовательно, вы можете упростить код до желаемого и использовать его на своем веб-сайте или в приложении. Разработчик поделился с вами всей структурой кода, чтобы вы могли редактировать ее в кратчайшие сроки.
Кнопка двойной стрелки
footer <
position:fixed;
bottom: 20px;
font-family:Arial, Helvetica;
font-size:12px;
color:#fff;
>
.center-con <
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
>
.round <
position: absolute;
border: 2px solid #fff;
width: 40px;
height: 40px;
border-radius: 100%;
#cta <
width:100%; cursor: pointer; position: absolute;
>
.bounceAlpha <
animation-name: bounceAlpha;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-timing-function:linear;
>
Оформление тултипов со стрелками на CSS с помощью символов
Тема уже достаточно избитая, но хочу поделится своим методом. Технологию придумал сам, на оригинальность не претендую, хотя пока что не встречал описание подобной техники.
Итак, стоит задача — сделать красивый тултип со стрелками на CSS.
Вариант с картинками рассматривать не будем, воспользуемся псевдоэлементами :before и :after.
Недавно здесь уже рассматривали такую технологию и использованием CSS-трансформаций:
http://habrahabr.ru/blogs/css/136061/
Я предлагаю другой способ — использование символов.
Первоначальный вариант статьи рассматривал использование символов ►, ◄, ▲, ▼, но, как верно заметил FTDeBUGgeR, на Андроиде все рассыпалось. Проблема оказалось банальной: в шрифтах под Андроид просто нет стрелок влево (►) и вправо (◄).
Отступать было некуда, и я решил использовать стрелки ↑, ↓, → и ←, который были и на Андроиде. Но тут внезапно под руку подвернулась бубновая масть — ведь этого символа достаточно для стрелок всех направлений! Кроме того, стрелки ↑, ↓, → и ← большого размера на самом деле не острые, а на Андроиде вообще имеют закругленные концы.
Поэтому будем рисовать «бубновые» тултипы.
Для начала оформим сам блок тултипа с красивым градиентным фоном, бордером и тенью:
В нашем примере мы будем использовать 2 CSS класса — ‘tooltip’ для общих свойств, а также для наглядности отдельные классы стрелок различного направления, например, ‘leftArrow’.
Далее добавим наши стрелки. Псевдоэлементы будут иметь свойство content с 16-ным кодом символа для его отображения.
Если необходим блок без бордеров, то задача упрощается и достаточно использовать один псевдоэлемент, например, :before.
Также запретим выделение нашей текстовой стрелки через user-select:
Сам символ располагается по центру блока 50х50 пикселей, а, используя свойство clip, мы будем отсекать часть символа, тем самым образуя именно треугольный блок стрелки нужного направления.
Главная трудность состоит в определении абсолютных координат наших псевдоэлементов, хотя с помощью FireBug’а можно быстро подобрать необходимый размер стрелки через font-size и спозиционировать элемент. Важно сместить «фоновую» стрелку так, чтобы она прикрыла бордер блока.
Также условимся, что нам необходимо иметь стрелку по центру края. Для этого используем 50% позиционирования по top или left, а также отрицательный margin в половину высоты или ширины блока соответственно.
Кстати первоначальный вариант использовал em, а не px в качество единиц размеров, но всеми любимая Opera катастрофически отказывалась понимать clip в em’ах, поэтому пришлось использовать px.
Здесь мы рассмотрим создание стрелки влево, в конце статьи есть ссылка на примеры для всех 4х вариантов стрелок (влево, вправо, вниз и вверх).
Собственно говоря, вот и все, встречаем «козырный бубновый тултип»: 
Для IE просто добавляем PIE, чтобы увидеть красоту (закругленные углы, тени и градиентный фон).
Остался минус — на левой и правой стрелках нельзя показать вертикальный градиент фона тултипа, но это не всегда заметно, а на тултипах с монотонным цветом фона и вообще не минус.
Треугольники через CSS
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.
Рис. 1. Треугольники в веб-дизайне
Использование border
Рис. 2. Добавление border к элементу
Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).
Рис. 3. Элемент с прозрачными границами
Пример 1. Блок с треугольником
Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.
За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.
| Вид | Стиль |
|---|---|
| border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green; | |
| border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green; | |
| border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green; | |
| border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green; |
Из таблицы видно, что невидимые границы занимают место, учитывайте это при позиционировании элементов. Стиль, также, необходимо дополнить нулевой шириной и высотой или воспользоваться свойством position, как это делалось в примере 1.
Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.
Рис. 4. Острый треугольник
Пример 2. Острый треугольник
С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).
Рис. 5. Рамка с уголком
Пример 3. Наложение треугольников
Из-за того, что мы накладываем один однотонный элемент поверх другого, этот способ годится только для однотонной заливки и не подходит для градиентов или фоновых картинок.
Использование трансформации
С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).
Пример 3. Трансформация
Результат данного примера показан на рис. 6.
Оформляем тултипы с помощью CSS3
Всем привет!
Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени. Можно, конечно, все запилить на картинках, но ведь это старомодно непрактично. Хотя бы из-за кучи оберток, для того, чтобы все тянулось во все стороны.
Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного фантазии.
От слов к делу.
Сразу скажу, что все примеры находятся по ссылке внизу статьи. А размышляющим о «высших материях» пост можно не читать, ибо ничего сверхъестественного здесь нет.
Итак, делаем заготовку.
Нам понадобится один див и 1 или 2 псевдоэлемента.
Тултип с рамкой
Скругляем сам тултип и делаем рамку. Затем к нему подвешиваем псевдоэлемент со стрелкой и с помощью transform сначала поворачиваем его, а затем наклоняем. В итоге у нас получится наклоненный параллелограмм. Задаем ему рамку и через z-index:-1 прячем его «под» основной блок. Но теперь у нас рамка тултипа оказывается поверх стрелки. Для этого берем еще один псевдоэлемент и накладываем точно поверх этой рамки, задав цвет фона, такой же как у тултипа. Вот и все. Код ниже.
Простой тултип со стрелкой
Здесь все просто. Как и написал во вступлении: берем блок и навешиваем к нему треугольник через псевдоэлемент.
Тултип с тенью
Здесь почти все тоже самое, как и в первом варианте, только добавляем тень.
И z-index делаем положительным(или вообще не указываем), т.к. тень есть тень и ее не скрыть вспомогательным псевдоэлементом. Сразу отмечу, что данная конструкция подразумевает под собой резервирование в тултипе места внизу.
В примере есть тултип с градиентом, но его не буду описывать, т.к. там все делается по аналогии. Добавлена лишь «красивость», которая не является предметом моего повествования.
Полупрозрачный тултип
В свою очередь он ничем не отличается от «обычного тултипа» со стрелкой. Задаем фон через rgba и вперед. Для порядка я его тоже наклонил.
Вот и все хитрости.
Пример находится здесь
Скажу, что этот пост не поражает своей новизной и уникальностью, он скорее из разряда «чтобы было» или «подглядеть кое-чего». Раз многие просят, стало быть полезно.
Спасибо за внимание.
Как сделать эту стрелку только в CSS?
Я создаю мастер-подобный процесс заказа, где у меня есть это меню: 
активная страница окрашена в зеленый цвет (в данном случае модель).
как сделать эту стрелку, используя только CSS?:
на данный момент я достигаю своей цели, используя несколько слоев и изображений:
левое изображение: 
изображение:
Я нашел ответ SO, который делает часть этого: стрелка с CSS, однако у меня проблемы с отступом слева.
Если у вас есть лучшее представление о том, как это сделать, пожалуйста, дайте мне знать!
4 ответов
если пространство между стрелками не должно быть прозрачным (это сплошной цвет) можно использовать :before и :after для создания кромки (без новых элементов в DOM)
в основном, он создает повернутые квадраты с границами, которые мы хотим, и помещает их соответственно
вот альтернативный подход ко всему этому, используя функции CSS3. Одним из преимуществ использования этого метода (и одной из основных причин добавления отдельного ответа) является то, что пространство между стрелками может быть прозрачным.
в основном реализация выглядит следующим образом:
скриншоты: (с наведением на второй пункт)
отзывчивая реализация с прозрачным фоном:
для отзывчивой версии панели отслеживания прогресса с полупрозрачными коробками посетите эта ручка. Ширина каждого шага / элемента назначается таким образом, чтобы их сумма всегда составляла 100% от доступной ширины и каждый предмет всегда имел тот же размер, что и остальные.
JavaScript используется для следующих функций: (все эти функции добавленной стоимости и могут быть удалены в зависимости от потребностей. Обратите внимание, что при удалении JS соответствующие свойства CSS должны быть помещены в файл CSS.)