Как сделать такую стрелку, подскажите пожалуйста
1 ответ
Можно на CSS..
.title {
display: inline-block;
position: relative;
padding-right: 120px;
box-sizing: border-box;
font-size: 150%;
line-height: 1.5;
}
.title > span {
display: inline-block;
position: relative;
z-index: 2;
}
.curve-arrow {
display: block;
width: 200px;
height: 150px;
border-radius: 0 40% 75% 0 / 0 40% 60% 0;
border: 2px solid #000;
border-left-color: transparent;
position: absolute;
box-sizing: border-box;
top: calc(1.5em / 2);
right: 0;
z-index: 1;
}
/* "обрезаем" верхний хвостик (начало) */
.curve-arrow::before {
content: '';
display: block;
width: 50%;
height: 2px;
background: #fff;
position: absolute;
left: -2px;
top: -2px;
}
/* стрелочка (конец) */
.curve-arrow::after {
content: '';
display: block;
width: 15px;
height: 20px;
background-image:
linear-gradient(-45deg, transparent calc(50% - 1.15px), #000 calc(50% - .75px), #000 calc(50% + .75px), transparent calc(50% + 1.15px)),
linear-gradient(45deg, transparent calc(50% - 1.15px), #000 calc(50% - .75px), #000 calc(50% + .75px), transparent calc(50% + 1.15px));
background-repeat: no-repeat;
background-position: 0 0, 0 100%;
background-size: auto 50%;
position: absolute;
left: -3px;
bottom: -11px;
}
<div class="title"><span>В ПОДАРОК</span> <div class="curve-arrow"></div></div>
Но лучше SVG.
.title {
display: inline-block;
position: relative;
padding-right: 120px;
box-sizing: border-box;
font-size: 150%;
line-height: 1.5;
}
.title .curve-arrow {
display: block;
width: 200px;
position: absolute;
right: 0;
top: calc(1.5em / 2);
}
<div class="title">В ПОДАРОК <svg class="curve-arrow" viewbox="-.05 -.05 8 6"><path d="M4 0C8 1 7 4 0 5M0 5 .45 4.5M0 5 .45 5.5" fill="none" stroke="#000" stroke-width=".05" stroke-linecap="round"/></svg></div>