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

в 21:07, , рубрики: css, веб-дизайн, Веб-разработка, метки:

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

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

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

<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>

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

Автор: maakros

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js