@testtoster

Как сверстать стрелочку?

Как правильно сверстать данный элемент? Всем спасибо за ответы =)
5e27f3de142db119894780.png
  • Вопрос задан
  • 626 просмотров
Решения вопроса 6
sniggering_deus
@sniggering_deus
Frontend Engineer & Fullstack Designer
Самое лёгкое, чистое и хорошее решение, использовать SVG...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon__arrow">
<path class="icon__arrow__fill" d="M396.6 160l19.4 20.7L256 352 96 180.7l19.3-20.7L256 310.5z"/>
</svg>


.icon__arrow {
width: 50px;
height: 50px;
}

.icon__arrow__fill {
fill: black;
}


Не стоит слишком увлекаться подобными методами создания элементов на CSS, если для такого есть SVG.
Ответ написан
petermzg
@petermzg
Самый лучший программист
Применить SVG
Ответ написан
@MrDecoy
Верставший фронтендер
Да вариантов хоть отбавляй. Зависит от вашей фантазии.

Можно сделать из двух псевдоэлементов ::before, ::after, Задав правильное позиционирование, transform-rotate и border (или width\height + background-color).

Можно из одного (псевдо)элемента. Делайте квадратик, задаёте границу с двух смежных сторон, а не полную - профит. В этом случае может не получиться полного красивого скругления всех углов стрелочки.

Можно жёстко задать размер блока, скрыть overflow, запихнуть внутрь блока букву "К" и подобрать соответствующий размер шрифта, чтобы осталась видна только такая вот "стрелочка" :-D

SVG\Canvas не предлагаю т.к. тэг CSS :-)
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
A зачем ее верстать? Если в svg она будет занимать меньше, чем в css. Да и вообще, в-принципе незачем верстать иконки
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы