Стрелочки для всплывающих окон без использования картинок

Очень часто на сайте или в веб приложении требуется реализовать всплывающие окна, привязанные к определенному элементу на странице с помощью ставшей уже стандартной стрелочки.

В данном топике я хочу поделиться способом создания таких окон без использования картинок для формирования стрелки. А также, в качестве бонуса мы получим возможность создавать такие попапы всего одним блоком.

<div class="popup bottom"> 	<!-- Содержимое окна --> </div>

Треугольнички на чистом CSS

Где-то на просторах интернета мной был честно подсмотрен оригинальный способ создания прямоугольных треугольничков с помощью CSS-свойства border.

Вот пример направленного вверх треугольника высотой 10 пикселей и шириной 20 пикселей.

.triangle { 	position: absolute; 	border-left: 10px solid transparent; 	border-right: 10px solid transparent; 	border-bottom: 10px solid #e0e0e0; }

В данном случае у нас получился блок нулевого размера с видимой нижней рамкой и прозрачными боковыми. Но у этого способа есть недостаток — в некоторых браузерах (например, Firefox) в месте перехода нижней рамки в боковую будет наблюдаться неприятная темная окантовка, так как истинный цвет боковых рамок будет черным. Поэтому заменим transparent на rgba(224, 224, 224, 0).

.triangle { 	position: absolute; 	border-left: 10px solid rgba(224, 224, 224, 0); 	border-right: 10px solid rgba(224, 224, 224, 0); 	border-bottom: 10px solid #e0e0e0; }

Полученный результат будет без указанного выше недостатка.

Прикрепляем наш треугольник к блоку с попапом

Для начала создадим наше всплывающее окно без всяких стрелочек.

<div class="popup"> 	<h2>Привет!</h2> 	<p>Я – всплывающее окно.</p> </div>​

.popup { 	position: absolute; 	max-width: 400px; 	border: 1px solid #71653a; 	border-radius: 5px; 	padding: 20px; 	color: #71653a; 	background-color: #fff1be; 	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); }​

Для прикрепления к нему стрелочки воспользуемся полезным псевдоэлементом :before. Он позволит нам не засорять внутреннюю структуру всплывающего окна лишними элементами.

.popup:before { 	content: ""; 	position: absolute; 	border-left: 10px solid rgba(113, 101, 58, 0); 	border-right: 10px solid rgba(113, 101, 58, 0); 	border-bottom: 10px solid #71653a; 	left: 20px; 	top: -10px; }​

Как мы видим, наш треугольничек замечательно присоединился к блоку с окном без использования дополнительных элементов. В том случае, если окно у нас будет без рамки, на этом можно остановиться, просто сделав стрелку цвета фона окна. В нашем же случае у окна есть рамка, и такая стрелка смотрится некрасиво.

К сожалению, внутри псевдоэлемента :before нельзя создать других элементов. Но не беда — у нас в запасе есть псевдоэлемент :after!

.popup:after { 	content: ""; 	position: absolute; 	border-left: 10px solid rgba(255, 241, 190, 0); 	border-right: 10px solid rgba(255, 241, 190, 0); 	border-bottom: 10px solid #fff1be; 	left: 20px; 	top: -9px; }​

Ну вот, уже лучше. Наш :after наложился поверх :before, и получилось то, что нужно.

Наводим порядок

Сделаем набор стилей, благодаря которым мы сможем прикреплять стрелочки к окнам простым указанием класса: left, right, top и bottom. Они будут означать положение окна слева, справа, сверху и снизу от родительского элемента соответственно.

В первую очередь сотрем наше описание псевдоэлементов .popup:before и .popup:after и выделим их общие свойства в один селектор.

.popup:before, .popup:after {     content: "";     position: absolute; }

Далее напишем стили для каждого из четырех вариантов расположения стрелки.

.popup.left:before {     border-left: 10px solid #71653a;     border-top: 10px solid rgba(113, 101, 58, 0);     border-bottom: 10px solid rgba(113, 101, 58, 0);     right: -10px;     top: 20px; }  .popup.left:after {     border-left: 10px solid #fff1be;     border-top: 10px solid rgba(255, 241, 190, 0);     border-bottom: 10px solid rgba(255, 241, 190, 0);     right: -9px;     top: 20px; }  .popup.right:before {     border-right: 10px solid #71653a;     border-top: 10px solid rgba(113, 101, 58, 0);     border-bottom: 10px solid rgba(113, 101, 58, 0);     left: -10px;     top: 20px; }  .popup.right:after {     border-right: 10px solid #fff1be;     border-top: 10px solid rgba(255, 241, 190, 0);     border-bottom: 10px solid rgba(255, 241, 190, 0);     left: -9px;     top: 20px; }  .popup.top:before {     border-left: 10px solid rgba(113, 101, 58, 0);     border-right: 10px solid rgba(113, 101, 58, 0);     border-top: 10px solid #71653a;     left: 20px;     bottom: -10px; }  .popup.top:after {     border-left: 10px solid rgba(255, 241, 190, 0);     border-right: 10px solid rgba(255, 241, 190, 0);     border-top: 10px solid #fff1be;     left: 20px;     bottom: -9px; }  .popup.bottom:before {     border-left: 10px solid rgba(113, 101, 58, 0);     border-right: 10px solid rgba(113, 101, 58, 0);     border-bottom: 10px solid #71653a;     left: 20px;     top: -10px; }  .popup.bottom:after {     border-left: 10px solid rgba(255, 241, 190, 0);     border-right: 10px solid rgba(255, 241, 190, 0);     border-bottom: 10px solid #fff1be;     left: 20px;     top: -9px; }

Вот и все. Теперь мы можем создавать попапы со стрелками, лишь указывая класс, соответствующий той стороне, с которой должно находиться наше окно относительно родительского элемента.

<div class="popup bottom">     <h2>Привет!</h2>     <p>Я – всплывающее окно со стрелочкой сверху.</p> </div>  <div class="popup top">     <h2>Привет!</h2>     <p>Я – всплывающее окно со стрелочкой снизу.</p> </div>  <div class="popup left">     <h2>Привет!</h2>     <p>Я – всплывающее окно, появляющееся слева от родительского элемента.</p> </div>  <div class="popup right">     <h2>Привет!</h2>     <p>А я – всплывающее окно, появляющееся справа.</p> </div>