Стрелки на CSS

Данные стрелки можно использовать для оформления меню, кнопок, подсказок, каруселей, слайдеров или других элементов на сайте.

Все варианты не используют графические иконки или шрифты

Вариант 1:

Стрелка с ховер-эффектом, которая подойдет для оформления кнопок "подробнее" или "далее", а также для построения последовательности, например: "Деньги -> Стулья -> Профит"

<div class="arrow-1">
	<div></div>
</div>

</div>

.arrow-1 {
	cursor: pointer;
	position: relative;
	width: 80px;
	height: 50px;
	margin: 20px;
}
.arrow-1 div {
	position: relative;
	top: 20px;
	width: 90px;
	height: 10px;
	background-color: #337AB7;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
	left:0;
	display: block;
}
.arrow-1 div::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 10px;
	top: -11px;
	right: -8px;
	background-color: #337AB7;
	transform: rotate(45deg);
}
.arrow-1 div::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 10px;
	top: 11px;
	right: -8px;
	background-color: #337AB7;
	box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
	transform: rotate(-45deg);
}
.arrow-1:hover {
	animation: arrow-1 1s linear infinite;
}
@keyframes arrow-1 {
    0% {
        left:0;
	}
    50% {
        left:10px;
	}
    100% {
        left:0;
	}
}

.arrow-1 {

cursor: pointer;

position: relative;

width: 80px;

height: 50px;

margin: 20px;

}

.arrow-1 div {

position: relative;

top: 20px;

width: 90px;

height: 10px;

background-color: #337AB7;

box-shadow: 0 3px 5px rgba(0, 0, 0, .2);

left:0;

display: block;

}

.arrow-1 div::after {

content: '';

position: absolute;

width: 40px;

height: 10px;

top: -11px;

right: -8px;

background-color: #337AB7;

transform: rotate(45deg);

}

.arrow-1 div::before {

content: '';

position: absolute;

width: 40px;

height: 10px;

top: 11px;

right: -8px;

background-color: #337AB7;

box-shadow: 0 3px 5px rgba(0, 0, 0, .2);

transform: rotate(-45deg);

}

.arrow-1:hover {

animation: arrow-1 1s linear infinite;

}

@keyframes arrow-1 {

0% {

left:0;

}

50% {

left:10px;

}

100% {

left:0;

}

Вариант 2:

Большая стрелка для каких-нибудь информационных или графических блоков.

<div class="arrow-2">
	<div class="arrow-2-top"></div>
	<div class="arrow-2-bottom"></div>
</div>

</div>

.arrow-2 {
	cursor: pointer;
	height: 120px;
	width: 80px;
	position: relative;
	margin: 20px;
}
.arrow-2-top, 
.arrow-2-bottom {
	background: #337AB7;
	height: 10px;
	left: -30px;
	position: absolute;
	top: 60px;
	width: 100px;
}
.arrow-2-top {
	top: 64px;
}
.arrow-2-top {
	transform: rotate(45deg);
	transform-origin: bottom right;
}
.arrow-2-bottom {
	transform: rotate(-45deg);
	transform-origin: top right;
}
.arrow-2-top::after, 
.arrow-2-bottom::after {
	background: #000;
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	transition: all 0.15s;
}
.arrow-2-top::after {
	left: 100%;
	right: 0;
	transition-delay: 0s;
}
.arrow-2-bottom::after {
	left: 0;
	right: 100%;
	transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-top::after {
	left: 0;
	transition-delay: 0.15s;
}
.arrow-2:hover .arrow-2-bottom::after {
	right: 0;
	transition-delay: 0s;
}

.arrow-2 {

cursor: pointer;

height: 120px;

width: 80px;

position: relative;

margin: 20px;

}

.arrow-2-top,

.arrow-2-bottom {

background: #337AB7;

height: 10px;

left: -30px;

position: absolute;

top: 60px;

width: 100px;

}

.arrow-2-top {

top: 64px;

}

.arrow-2-top {

transform: rotate(45deg);

transform-origin: bottom right;

}

.arrow-2-bottom {

transform: rotate(-45deg);

transform-origin: top right;

}

.arrow-2-top::after,

.arrow-2-bottom::after {

background: #000;

content: '';

height: 100%;

position: absolute;

top: 0;

transition: all 0.15s;

}

.arrow-2-top::after {

left: 100%;

right: 0;

transition-delay: 0s;

}

.arrow-2-bottom::after {

left: 0;

right: 100%;

transition-delay: 0.15s;

}

.arrow-2:hover .arrow-2-top::after {

left: 0;

transition-delay: 0.15s;

}

.arrow-2:hover .arrow-2-bottom::after {

right: 0;

transition-delay: 0s;

}

Вариант 3:

Стрелка на SVG для меню или кнопки "подробнее / далее"

Подробнее или пунк меню

<a class="arrow-3" href="#link">Подробнее или пунк меню
    <svg class="arrow-3-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
		<g fill="none" stroke="#337AB7" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
			<circle class="arrow-3-iconcircle" cx="16" cy="16" r="15.12"></circle>
			<path class="arrow-3-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
		</g>
	</svg>
</a>

<a class="arrow-3" href="#link">Подробнее или пунк меню

</g>

</svg>

</a>

.arrow-3 {
	color: #337AB7;
	cursor: pointer;
	text-decoration: none;
	font-size: 18px;
	height: 18px;
	line-height: 18px; 
	display: inline-block; 
	margin: 20px;
}
.arrow-3 .arrow-3-icon {
	position: relative;
	top: -1px;
	transition: transform 0.3s ease;
	vertical-align: middle;
}
.arrow-3 .arrow-3-iconcircle {
	transition: stroke-dashoffset .3s ease;
	stroke-dasharray: 95;
	stroke-dashoffset: 95;
}
.arrow-3:hover .arrow-3-icon {
	transform: translate3d(5px, 0, 0);
}
.arrow-3:hover .arrow-3-iconcircle {
	stroke-dashoffset: 0;
}

.arrow-3 {

color: #337AB7;

cursor: pointer;

text-decoration: none;

font-size: 18px;

height: 18px;

line-height: 18px;

display: inline-block;

margin: 20px;

}

.arrow-3 .arrow-3-icon {

position: relative;

top: -1px;

transition: transform 0.3s ease;

vertical-align: middle;

}

.arrow-3 .arrow-3-iconcircle {

transition: stroke-dashoffset .3s ease;

stroke-dasharray: 95;

stroke-dashoffset: 95;

}

.arrow-3:hover .arrow-3-icon {

transform: translate3d(5px, 0, 0);

}

.arrow-3:hover .arrow-3-iconcircle {

stroke-dashoffset: 0;

}

Вариант 4:

Вариант стрелки для аккордиона или выпадающего блока (меняет направление по клику).

Требуется библиотека jQuery

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

</div>

.arrow-4 {
	position: relative;
	cursor: pointer;
	margin:20px;
	width: 66px;
	height: 30px;
}
.arrow-4-left {
	position: absolute;
	background-color: transparent;
	top: 10px;
	left: 0;
	width: 40px;
	height: 10px;
	display: block;
	transform: rotate(35deg);
	float: right;
	border-radius: 2px;
}
.arrow-4-left:after {
	content: "";
	background-color: #337AB7;
	width: 40px;
	height: 10px;
	display: block;
	float: right;
	border-radius: 6px 10px 10px 6px;
	transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
	z-index: -1;
}

.arrow-4-right {
	position: absolute;
	background-color: transparent;
	top: 10px;
	left: 26px;
	width: 40px;
	height: 10px;
	display: block;
	transform: rotate(-35deg);
	float: right;
	border-radius: 2px;
}
.arrow-4-right:after {
	content: "";
	background-color: #337AB7;
	width: 40px;
	height: 10px;
	display: block;
	float: right;
	border-radius: 10px 6px 6px 10px;
	transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
	z-index: -1;
}
.open .arrow-4-left:after {
	transform-origin: center center;
	transform: rotate(-70deg);
}
.open .arrow-4-right:after {
	transform-origin: center center;
	transform: rotate(70deg);
}

.arrow-4 {

position: relative;

cursor: pointer;

margin:20px;

width: 66px;

height: 30px;

}

.arrow-4-left {

position: absolute;

background-color: transparent;

top: 10px;

left: 0;

width: 40px;

height: 10px;

display: block;

transform: rotate(35deg);

float: right;

border-radius: 2px;

}

.arrow-4-left:after {

content: "";

background-color: #337AB7;

width: 40px;

height: 10px;

display: block;

float: right;

border-radius: 6px 10px 10px 6px;

transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);

z-index: -1;

}

.arrow-4-right {

position: absolute;

background-color: transparent;

top: 10px;

left: 26px;

width: 40px;

height: 10px;

display: block;

transform: rotate(-35deg);

float: right;

border-radius: 2px;

}

.arrow-4-right:after {

content: "";

background-color: #337AB7;

width: 40px;

height: 10px;

display: block;

float: right;

border-radius: 10px 6px 6px 10px;

transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);

z-index: -1;

}

.open .arrow-4-left:after {

transform-origin: center center;

transform: rotate(-70deg);

}

.open .arrow-4-right:after {

transform-origin: center center;

transform: rotate(70deg);

}

$(".arrow-4").click(function() {
	$(this).toggleClass("open");
});

$(".arrow-4").click(function() {

$(this).toggleClass("open");

});

Вариант 5:

Стрелки для оформления подсказок или каких-нибудь информационных блоков

Стрелка вверх

Стрелка вниз

Стрелка влево

Стрелка вправо

<div class="arrow-5 arrow-5-top">
	Стрелка вверх
</div>

<div class="arrow-5 arrow-5-bottom">
	Стрелка вниз
</div>

<div class="arrow-5 arrow-5-left">
	Стрелка влево
</div>

<div class="arrow-5 arrow-5-right">
	Стрелка вправо
</div>

Стрелка вверх

</div>

Стрелка вниз

</div>

Стрелка влево

</div>

Стрелка вправо

</div>

.arrow-5 {
	background: #337AB7;
	text-align: center;
	color: #fff;
	padding: 20px;
	margin: 20px;
}
.arrow-5-top,
.arrow-5-bottom,
.arrow-5-right,
.arrow-5-left {
	position: relative;
	z-index: 10;
}
.arrow-5-top::after,
.arrow-5-bottom::after,
.arrow-5-right::after,
.arrow-5-left::after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	position: absolute;
	z-index: 10;
	border: 0;
}
.arrow-5-top::after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-left: -10px;
	left: 50%;
	border-bottom: 10px solid #337AB7;
	top: -10px;
}
.arrow-5-bottom::after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-left: -10px;
	left: 50%;
	border-top: 10px solid #337AB7;
	bottom: -10px;
}
.arrow-5-right::after {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-top: -10px;
	top: 50%;
	border-left: 10px solid #337AB7;
	left: auto;
	right: -10px;
}
.arrow-5-left::after {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-top: -10px;
	top: 50%;
	border-right: 10px solid #337AB7;
	left: -10px;
}

.arrow-5 {

background: #337AB7;

text-align: center;

color: #fff;

padding: 20px;

margin: 20px;

}

.arrow-5-top,

.arrow-5-bottom,

.arrow-5-right,

.arrow-5-left {

position: relative;

z-index: 10;

}

.arrow-5-top::after,

.arrow-5-bottom::after,

.arrow-5-right::after,

.arrow-5-left::after {

content: '';

width: 0;

height: 0;

display: block;

position: absolute;

z-index: 10;

border: 0;

}

.arrow-5-top::after {

border-left: 10px solid transparent;

border-right: 10px solid transparent;

margin-left: -10px;

left: 50%;

border-bottom: 10px solid #337AB7;

top: -10px;

}

.arrow-5-bottom::after {

border-left: 10px solid transparent;

border-right: 10px solid transparent;

margin-left: -10px;

left: 50%;

border-top: 10px solid #337AB7;

bottom: -10px;

}

.arrow-5-right::after {

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

margin-top: -10px;

top: 50%;

border-left: 10px solid #337AB7;

left: auto;

right: -10px;

}

.arrow-5-left::after {

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

margin-top: -10px;

top: 50%;

border-right: 10px solid #337AB7;

left: -10px;

}

Вариант 6:

Стрелки на SVG для слайдера или карусели

<div class="arrow-6">
	<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<g transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
			<polygon class="arrow-6-pl" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<polygon class="arrow-6-pl-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
		</g>
	</svg>
	<svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<g>
			<polygon class="arrow-6-pl" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<polygon class="arrow-6-pl-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
			<path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
		</g>
	</svg>
</div>

</g>

</svg>

<g>

</g>

</svg>

</div>

.arrow-6 {
	margin:20px;
}
.arrow-6 svg {
	width: 100px;
	height: auto;
	margin: 0 2rem;
	cursor: pointer;
	overflow: visible;
}
.arrow-6 svg polygon, 
.arrow-6 svg path {
	transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
	fill: #337AB7;
}
.arrow-6 svg:hover polygon, 
.arrow-6 svg:hover path {
	transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
	fill: #000;
}
.arrow-6 svg:hover .arrow-6-pl {
	animation: arrow-6-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.arrow-6 svg:hover .arrow-6-pl-fixed {
	animation: arrow-6-fixed-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;
}

@keyframes arrow-6-anim {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	5% {
		transform: translateX(-0.1rem);
	}
	100% {
		transform: translateX(1rem);
		opacity: 0;
	}
}
@keyframes arrow-6-fixed-anim {
	5% {
		opacity: 0;
	}
	20% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

.arrow-6 {

margin:20px;

}

.arrow-6 svg {

width: 100px;

height: auto;

margin: 0 2rem;

cursor: pointer;

overflow: visible;

}

.arrow-6 svg polygon,

.arrow-6 svg path {

transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);

fill: #337AB7;

}

.arrow-6 svg:hover polygon,

.arrow-6 svg:hover path {

transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);

fill: #000;

}

.arrow-6 svg:hover .arrow-6-pl {

animation: arrow-6-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;

}

.arrow-6 svg:hover .arrow-6-pl-fixed {

animation: arrow-6-fixed-anim 1s cubic-bezier(0.2, 1, 0.3, 1) infinite;

}

@keyframes arrow-6-anim {

0% {

opacity: 1;

transform: translateX(0);

}

5% {

transform: translateX(-0.1rem);

}

100% {

transform: translateX(1rem);

opacity: 0;

}

@keyframes arrow-6-fixed-anim {

5% {

opacity: 0;

}

20% {

opacity: 0.4;

}

100% {

opacity: 1;

}

Вариант 7:

Анимированная стрелка вниз

<div class="arrow-7">
	<span></span>
	<span></span>
	<span></span>
</div>

</div>

.arrow-7 {
    margin: 40px auto 10px auto;
	width: 38px;
	height: 100px;
}
.arrow-7 span {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #337AB7;
    border-right: 5px solid #337AB7;
    transform: rotate(45deg);
    margin: -16px 0;
    animation: arrow-7 2s infinite;
}
.arrow-7 span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow-7 span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes arrow-7 {
    0%{
        opacity: 0;
        transform: translate(0,-20px) rotate(45deg);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translate(0,20px) rotate(45deg);
    }
}

.arrow-7 {

margin: 40px auto 10px auto;

width: 38px;

height: 100px;

}

.arrow-7 span {

display: block;

width: 30px;

height: 30px;

border-bottom: 5px solid #337AB7;

border-right: 5px solid #337AB7;

transform: rotate(45deg);

margin: -16px 0;

animation: arrow-7 2s infinite;

}

.arrow-7 span:nth-child(2){

animation-delay: -0.2s;

}

.arrow-7 span:nth-child(3){

animation-delay: -0.4s;

}

@keyframes arrow-7 {

0%{

opacity: 0;

transform: translate(0,-20px) rotate(45deg);

}

50%{

opacity: 1;

}

100%{

opacity: 0;

transform: translate(0,20px) rotate(45deg);

}

Вариант 8:

Еще один вариант анимированной стрелки вниз

<div class="arrow-8"></div>

1	<div class="arrow-8"></div>

.arrow-8 {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 30px auto 80px auto;
}
.arrow-8:before,
.arrow-8:after {
	content: '';
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border-left: 26px solid #337AB7;
	border-bottom: 26px solid #337AB7;
	animation: arrow-8 3s linear infinite;
}
.arrow-8:after {
	animation: arrow-8 3s linear infinite -1.5s;
}
@keyframes arrow-8 {
	0% {
		opacity: 0;
		transform: translate(0, -53px) rotate(-45deg);
	}
	10%, 90% {
		opacity: 0;
	}
	50% {
		opacity: 1;  
		transform: translate(0, 0) rotate(-45deg);
	}
	100% {
		opacity: 0;
		transform: translate(0, 53px) rotate(-45deg);
	}
}

.arrow-8 {

position: relative;

width: 100px;

height: 100px;

margin: 30px auto 80px auto;

}

.arrow-8:before,

.arrow-8:after {

content: '';

position: absolute;

box-sizing: border-box;

width: 100%;

height: 100%;

border-left: 26px solid #337AB7;

border-bottom: 26px solid #337AB7;

animation: arrow-8 3s linear infinite;

}

.arrow-8:after {

animation: arrow-8 3s linear infinite -1.5s;

}

@keyframes arrow-8 {

0% {

opacity: 0;

transform: translate(0, -53px) rotate(-45deg);

}

10%, 90% {

opacity: 0;

}

50% {

opacity: 1;

transform: translate(0, 0) rotate(-45deg);

}

100% {

opacity: 0;

transform: translate(0, 53px) rotate(-45deg);

}

Еще несколько вариантов стрелок можно найти в темах: Кнопка "вверх" и варианты ее оформления и Векторные стрелки на SVG

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 18.04.2019 / Обновлено: 21.12.2020
Рубрики: Вкладки, блоки и списки, Тексты, ссылки и кнопки
Метки: CSS, jQuery, SVG, Сборники
143986 просмотров

5 вариантов различных частиц, которые разлетаются в разные стороны по клику на кнопке

Новогодняя секция

Новогодняя блок-секция с поздравлением

Нестандартная защита от копирования

Подмена в копируемом тексте кириллических букв на латинские.

Добавить комментарий:

Ваш комментарий отправлен!

dr0sel: 23.02.2023 в 14:53

Здраствуйте. Можно узнать как второй вариант повернуть влево? Можно было бы сразу сделать в обе стороны в примерах?

Ответить
Данил: 20.02.2023 в 13:46

и на северо запад

Ответить
Данил: 20.02.2023 в 13:45

как повернуть стрелку на юзо запад в 1 варианте?

Ответить
Вася: 01.02.2023 в 17:09

Как сделать стрелку более толстой в примере 1?

Ответить
- Alexander: 02.02.2023 в 07:11
  
  height: 10px;
  И позиции подравнять потом
  
  Ответить
Игорь: 07.10.2021 в 20:00

Здравствуйте, возможно изменить цвет (Вариант 3) при наведении?

Ответить
- Alexander: 08.10.2021 в 07:50
  
  Я вам больше скажу, изменить можно даже размер!
  
  Ответить
Лена: 08.04.2021 в 03:15

Здравствуйте, у меня стрелка 7 не анимированная получается и стоит слева.

Ответить
- Alexander: 10.04.2021 в 10:50
  
  То что слева, это ее выравнять нужно как угодно родительским контейнером.
  А то что не анимированная, это какая то ошибка...
  
  Ответить
- Alexander: 10.04.2021 в 16:17
  
  Вот пример в вакууме (код 1 в 1, что и тут)
  
  Ответить
  - Лена: 10.04.2021 в 22:40
    
    Спасибо за ответ) Разобралась. Все заработало. Спасибо)
    
    Ответить
Евгения: 13.01.2021 в 20:42

Здравствуйте. На тильде будет работать?

Ответить
- Alexander: 14.01.2021 в 21:18
  
  Если там можно править HTML и CSS, то да
  
  Ответить
Мария: 20.09.2020 в 22:17

Здравствуйте, подскажите как поменять цвет стрелки ?

Ответить
- Alexander: 22.09.2020 в 09:56
  
  Какой именно?
  
  Ответить
  - Lava_frai: 03.10.2020 в 23:11
    
    Как можно изменить цвет стрелки из третьего примера?
    
    Ответить
    - Alexander: 04.10.2020 в 00:15
      
      В HTML
      
      stroke="#337AB7"
      
      Ответить
Анатолий: 02.08.2020 в 12:13

Здравствуйте, подскажите пожалуйста как выравнить вариант 8 по центру блока, в css ишу margin: 30px auto; выравнивание есть, но всё равно небольшой сдвиг в право остаётся.
Заранее большое спасибо

Ответить
- Анатолий: 02.08.2020 в 12:15
  
  сдвиг в лево, а не вправо
  
  Ответить
  - Alexander: 02.08.2020 в 12:59
    
    Подправил код, проверьте, остался ли сдвиг?
    
    Ответить
    - Анатолий: 03.08.2020 в 14:36
      
      Теперь всё хорошо, спасибо большое !!!
      
      Ответить
Yakotlus: 06.05.2020 в 16:14

Хорошие примеры, спасибо. Но код стоит править. Много дублированных стилей, код можно написать гораздо короче и т.п. Oтрицательный delay…не стоит так делать.

Ответить
- Alexander: 06.05.2020 в 16:47
  
  Отрицательный animation-delay допускается и полезный даже 🙂
  
  Ответить
Карим: 19.03.2020 в 23:42

Как сделать такую стреллку ссылкой?

Ответить
- Alexander: 20.03.2020 в 11:10
  
  Обернуть в тег a
  
  Ответить
Антон: 25.01.2020 в 14:47

Отличные эффекты, спасибо!

Ответить
Ihar: 11.12.2019 в 13:33

Здравствуйте! Подскажите как сделать "Вариант - 8" чтобы она указывала в левую сторону?

Ответить
- Alexander: 11.12.2019 в 14:48
  Поместите в контейнер
  
  <div class="arrow-wrap"> <div class="arrow-8"></div> </div>
  
  CSS:
  
  .arrow-wrap { transform: rotate(90deg); display: inline-block; }
  Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Вариант 6:

Вариант 7:

Вариант 8:

Смотрите также:

Добавить комментарий:

Комментарии: