Прочитав эту заметку, вы узнайте как сверстать вот такую симпатичную стрелочку:

«Рисуем» треугольники

Возьмём обычный бокс с бордером, для наглядности раскрасив стороны в разные цвета:

.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">&nbsp;</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 строк