Облако комментария с треугольничком на css

Сегодня мы научимся создавать вот такое облако комментария с треугольничком. Это, так называемый, tooltip (тултип) или всплывающая подсказка. Довольно популярное дизайнерское решение. А вот реализация его ставит многих вебмастеров в тупик. На самом деле все проще, чем кажется! Поехали!

Сразу раскрою секрет и скажу, что для достижения подобного эффекта мы будем использовать псевдоэлементы :after и :before.

Но прежде чем приступить к созданию, немного объясню смысл. Для этого создадим рандомный элемент:

<div class="rand"></div>

А теперь зададим стили для этого элемента:

.rand {
	width:0;
	height:0;
	border:116px solid transparent;
	border-bottom-color: white;
	border-right-color:red;
	border-top-color:green;
	border-left-color:blue;
}

Что мы делаем? Задаем ширину и высоту элемента равными нулю! Ставим большие границы (border) с прозрачным цветом. А затем переопределяем цвет каждой границы. И что мы видим:

Теперь все должно стать по местам. Когда элемент не имеет ширины и высоты, то границы превращаются в треугольники! Просто достаточно убрать 3 границы из 4 (просто не переопределять их цвета) и мы получим нужный треугольник.

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

Ну, хватит теории. Разметка нашего элемента:

<div class="cloud">Комментарий</div>

А теперь стили:

body {
	background:#191919;
	color:#ededed;
}
.cloud {
	border:2px solid #fff;
	border-radius:10px;
	height:50px;
	width:500px;
	padding:20px;
	position:relative;
}
.cloud:before {
	border:50px solid transparent;
	border-bottom-color:white;
	position:absolute;
	bottom:100%;
	right:40px;
	content:'';
}
.cloud:after {
	border:48px solid transparent;
	border-bottom-color:#191919;
	position:absolute;
	bottom:100%;
	right:42px;
	content:'';
}

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