Сегодня мы попрактикуемся в мастерстве и создадим указатели на CSS в виде информационных стрелок! Создавать указатели будем двумя способами. Выбор способа зависит от того, какой указатель нужно получить.
Если ваша цель — создать форму указателя с цветовым и текстовым наполнением, но без тени, бордюр и прочих дополнительных свойств, то стоит обратить внимание на CSS функцию polygon(), применяемую в качестве значения для свойства clip-path. Это гибкое лаконичное решение, для реализации которого требуется лишь правильно рассчитать расстановку точек многоугольника. Однако, данный вариант не подходит для создания фигур с тенью или бордюрами, так как при использовании clip-path все дополнения, выходящие за пределы обозначенной фигуры, отсекаются. Поэтому мы рассмотрим еще один способ создания указателей — с поддержкой дополнительных свойств. Во втором варианте мы создадим указатель посредством совмещения двух скошенных прямоугольников, то есть параллелограммов.
Способ первый: создание полигонов в форме указателей с помощью clip-path:polygon()
В этом разделе мы создадим указатели, представленные на изображении выше. По сути, указатели представляют собой плоские многоугольники, которые довольно просто создать с помощью CSS свойства clip-path со значением polygon(). Однако, прежде чем мы «нарисуем» первый указатель, предлагаю вспомнить, как работает clip-path:
Коротко о clip-path: свойство clip-path позволяет скрыть те части блока, которые выходят за пределы траектории, обозначенной в значении свойства. Например, если к селектору .block применить свойство clip-path со значением polygon(), то пользователь увидит не весь элемент .block, а лишь ограниченный функцией polygon() многоугольник. Поэтому тени и бордеры, примененные к селектору .block также будут отсечены.
А теперь немного теории о работе CSS функции polygon():
Кротко о polygon(): с помощью функции polygon(x1 y1, x2 y2…) можно создать многоугольник, вершинами которого являются точки с координатами x1 y1, x2 y2… . При этом, первая пара координат: x1 y1 — это вершина многоугольника, расположенная выше других точек в левой части. Очередность последующих вершин определяется движением по часовой стрелки. Рассмотрим на примере указателя на изображении ниже:
Соответственно, чтобы создать указатель, как на изображении выше, нужно к синему прямоугольнику с определенными заранее размерами, применить свойство:
clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
Предлагаю реализовать нашу задумку на практике! Создадим в html-файле блок с классом «signpopst1-left»:
<div class="signpost1-left">
<p>Налево не ходи!</p>
</div>
В CSS-файле для созданного блока добавим свойства: цвета, размеров, зададим внешние отступы и обязательно — свойство clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%)! Обратите внимание на 6-ю строку:
.signpost1-left{
margin: 40px; /* задаем внешние отступы */
background-color: #1565c1; /* определяем цвет */
width: 20em; /* устанавливаем размеры */
height: 5em;
clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 50%); /* создаем полигон */
shape-outside: polygon(12% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 50%);
}
.signpost1-left p{
font-family: 'Oswald';
color: #fff;
font-size: 24px;
margin: 0 auto;
padding-top: 22px;
text-align: center;
text-transform: uppercase;
}
Так как я хотела создать эффект обтекания текстом созданного указателя, то добавила свойство shape-outside: polygon(12% 0%, 100% 0%, 100% 100%, 12% 100%, 0% 50%). Параметры для расположенного на указателе текста я перечислила в списке свойств селектора .signpost1-left p. В итоге получился запланированный указатель, направленный в левую сторону:
Аналогичным образом можно создать другие фигуры. Ниже я приведу тексты html и css-кода, а также скриншоты трех других вариантов указателей:
Указатель №1 вправо:
<div class="signpost1-right">
<p>Поверни направо</p>
</div>
.signpost1-right{
margin: 40px;
background-color: #1565c1;
width: 20em;
height: 5em;
clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
}
.signpost1-right p{
font-family: 'Oswald';
color: #fff;
font-size: 24px;
padding-top: 22px;
text-align: center;
text-transform: uppercase;
}
Указатель №2 влево
<div class="signpost2-left">
<p>4 раза, и ты вернешься</p>
</div>
.signpost2-left{
margin: 40px;
background-color: #1565c1;
width: 26em;
height: 5em;
clip-path: polygon(8% 0%, 100% 0%, 94% 50%, 100% 100%, 8% 100%, 0% 50%);
shape-outside: polygon(8% 0%, 100% 0%, 94% 50%, 100% 100%, 8% 100%, 0% 50%);
}
.signpost2-left p {
font-family: 'Oswald';
color: #fff;
font-size: 24px;
padding-top: 22px;
text-align: center;
text-transform: uppercase;
}
Указатель №2 вправо
<div class="signpost2-right">
<p>В исходную точку</p>
</div>
.signpost2-right{
margin: 40px;
background-color: #1565c1;
width: 26em;
height: 5em;
clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 6% 50%);
shape-outside: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 6% 50%);
}
.signpost2-right p{
font-family: 'Oswald';
color: #fff;
font-size: 24px;
padding-top: 22px;
text-align: center;
text-transform: uppercase;
}
Второй способ: создание указателей совмещением косых блоков
Этот способ реализации указателей я рекомендую использовать в случае, если планируется добавить к указателю тень или создать обводку. Взгляните на изображение ниже:
На представленном изображении оранжевым и зеленым цветами обозначены границы двух параллелограммов, образующих указатель. Можно, конечно, для верхней и нижней половины указателя создать отдельные блоки в html-файле. Однако, я предлагаю не плодить дополнительные блоки, а использовать псевдоэлементы: :before — для верхней половины указателя, :after — для нижней половины указателя. Для начала, в html-файле создадим блок с классом «signpost3»:
<div class="signpost3">
<p>Указатель с тенью</p>
</div>
Затем откроем CSS-файл и с помощью псевдоэлементов :after и :before создадим верхнюю и нижнюю половины указателя. Наклон половинок реализуем посредством применения свойства transform:skew(). Подробнее о создании наклонных блоков можно прочитать в статье «Создаем косые блоки средствами CSS«. Затем зададим псевдоэлементам абсолютное позиционирование и выровняем их с помощью свойств left и top. В завершении создадим тень с помощью свойства box-shadow и добавим свойства селектору «.signpost3 p» для преображения текста:
.signpost3{
margin: 40px;
width: 20em;
height: 5em;
position:relative;
}
.signpost3:before, .signpost3:after{
position:absolute;
float:left;
content:"";
width: 20em;
height: 2.5em;
background-color: #1565c1;
}
.signpost3:before{
top:0%;
left:0;
transform:skew(-40deg);
box-shadow: 9px 8px #dbd7d7;
}
.signpost3:after{
top:50%;
left:0;
transform:skew(40deg);
box-shadow: -6px 7px 1px 0px #dbd7d7;
}
.signpost3 p{
font-family: 'Oswald';
color: #fff;
position:relative;
z-index:2;
font-size: 24px;
padding-top: 22px;
text-align: center;
text-transform: uppercase;
}
Для того, чтобы создать аналогичный указатель вправо, нужно поменять местами значения функции skew() у псевдоэлементов. То есть, для селектора «.signpost3:before» установить свойство transform:skew(40deg), а для селектора «.signpost3:after» — transform:skew(-40deg), а также изменить смещение тени по x на противоположное значение. То есть для селектора .signpost3:after значение свойства box-shadow станет box-shadow: 6px 7px 1px 0px #dbd7d7, а для .signpost3:before — box-shadow: 9px 8px #dbd7d7. В-остальном, стили останутся прежними. Ниже я приведу HTML и CSS код для создания указателя с тенью вправо из блока с классом signpost3-right:
<div class="signpost3-right">
<p>Указатель с тенью</p>
</div>
.signpost3{
margin: 40px;
width: 20em;
height: 5em;
position:relative;
}
.signpost3:before, .signpost3:after{
position:absolute;
float:left;
content:"";
width: 20em;
height: 2.5em;
background-color: #1565c1;
}
.signpost3:before{
top:0%;
left:0;
transform:skew(40deg);
box-shadow: -9px 8px #dbd7d7;
}
.signpost3:after{
top:50%;
left:0;
transform:skew(-40deg);
box-shadow: 6px 7px 1px 0px #dbd7d7;
}
.signpost3 p{
font-family: 'Oswald';
color: #fff;
position:relative;
z-index:2;
font-size: 24px;
padding-top: 22px;
text-align: center;
text-transform: uppercase;
}
Подведем итог: в статье мы рассмотрели 2 способа создания указателей: с помощью clip-path:polygon() и посредством соединения двух параллелограммов. Первый способ отличается компактностью, зато второй позволяет добавить к фигуре тень. Выбор способа остается за вами. И пусть на вашем пути встречаются только правильные указатели!