Нарисовать стрелку на CSS
Стрелки с рамками или стрелки в виде треугольников очень часто можно увидеть в макетах для верстки. Эти простые фигуры легко можно нарисовать, применяя лишь CSS свойства. У такого способа есть огромное преимущество перед скачанными иконками: в нарисованные CSS стрелки легко вносить изменения и применять к ним анимацию.
Создадим в HTML разметке блок и стилизуем его.
// HTML
<div class="arrow"></div>
Сделаем общую основу для стрелок (вверх, вниз, вправо и влево), представляющую из себя квадрат с верхней и правой рамкой. Две другие стороны квадрата останутся невидимыми.
// CSS
.arrow {
width: 60px;
height: 60px;
border-top: 10px solid #6E18C0;
border-right: 10px solid #6E18C0;
margin-right: 60px;
}
В дальнейшем создадим для каждой стрелке свой блок и к уже имеющемуся классу arrow добавим дополнительные классы со свойством transform.
Стрелка вверх
Повернем стрелочку вверх на 45 градусов. По аналогии оформим остальные стрелки.
// HTML
<div class="arrow arrow-top"></div>
// CSS
.arrow-top {
transform: rotate(-45deg);
}
Стрелка вниз
// HTML
<div class="arrow arrow-bottom"></div>
// CSS
.arrow-bottom {
transform: rotate(135deg);
}
Стрелка вправо
// HTML
<div class="arrow arrow-right"></div>
// CSS
.arrow-right {
transform: rotate(45deg);
}
Стрелка влево
// HTML
<div class="arrow arrow-left"></div>
// CSS
.arrow-left {
transform: rotate(-135deg);
}
Довольно таки часто в макетах встречаются маленькие треугольники, которые используются как стрелки. Такие треугольники делаются на толстых рамках. Обнуляем ширину и высоту блока и оставляем одну из сторон в цвете, а две другие стороны делаем с широкими прозрачными рамками. В стилизации участвуют только три стороны.
Треугольник вверх и вниз
// HTML
<div class="triangle-up"></div>
<div class="triangle-down"></div>
// CSS
.triangle-up {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid #6E18C0;
}
.triangle-down {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid #6E18C0;
}
Треугольник слева и справа
// HTML
<div class="triangle-left"></div>
<div class="triangle-right"></div>
// CSS
.triangle-left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-right: 100px solid #6E18C0;
}
.triangle-right {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
border-left: 100px solid #6E18C0;
}
Что нужно для открытия своей Web-студии? Самое главное - это наконец-то оставить утопическую идею, что я сам могу на профессиональном уровне делать всю работу. Без частичного делегирования обязанностей по созданию клиентского сайта другим специалистам, к сожалению ваша новенькая Web-студия не будет успешна. Когда клиент обращается в Web-студию, он рассчитывает получить сайт под ключ в одном месте. Уж поверьте, одному человеку (особенно начинающему) не вытянуть заказ даже средней сложности. Основываясь на своем личный опыт, я записал пошаговое руководство по Созданию своей Web-студии за 55 дней.
-
Создано 30.03.2020 10:31:22
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.