Прочитав эту заметку, вы узнайте как сверстать вот такую симпатичную стрелочку:
«Рисуем» треугольники
Возьмём обычный бокс с бордером, для наглядности раскрасив стороны в разные цвета:
.box{
border-style: solid;
border-top-color: blue;
border-right-color: green;
border-bottom-color: yellow;
border-left-color: red;
}
<div class="box" style="width: 200px; height: 200px; border-width: 2px"></div>
А теперь увеличим размер бордеров, одновременно уменьшив бокс:
<div class="box" style="width: 100px; height: 100px; border-width: 52px"></div>
Убёрем высоту и ширину совсем:
Треугольники готовы.
«Рисуем» стрелку
Заготовка:
.arrow{
position: relative;
background: #09F;
display: inline-block;
width: 200px;
padding: 5px;
color: #FFF;
}
<div class="arrow"> </div>
Добавим знакомые нам треугольники, с помощью псевдоэлемента :after, раскрасив все в один цвет, и сделав прозрачным левый бордер:
.arrow:after{
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
border: 100px solid red;
border-left-color: transparent;
z-index: 10;
content: "";
}
Хитрым образом спозиционируем псевдоэлемент:
/* добавляем */
.arrow:after{
top: 50%;
right: -100px;
margin-top: -100px;
}
Скроем выступы и покрасим бордеры в цвет фона:
/* добавляем */
.arrow{
overflow: hidden;
}
.arrow:after{
border-color: #FFF;
border-left-color: transparent;
}
Стрелка готова, для крутости можно добавить градиент:
У метода есть 2 недостатка:
- фон должен быть однородным,
- по-настоящему многострочную стрелку сделать не получиться, потому-что
но вполне возможно подобрать значение правого паддинга для 2-3 строк