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

Комментарии в виде пузырька.

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

Для начала созадим разметку. Откроем файл index.html и пропишем следующее:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Комментарии в виде пузырька</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="comments">
   <div class="comment bubble">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, error.</p>
   </div>
  </div>
</body>
</html>

Теперь перейдем к CSS.

body {
  background: #f0f0f0;
}

.comments {
  width: 400px;
}

.comment {
  width: 100%;
  margin-bottom: 20px;
}

.comment p {
  margin: 0 0 10px 0;
}

.bubble {
  position: relative;
  background: #fff;
  padding: 20px;
  color: #222;
  border-radius: 3px;
  margin-left: 20px;
}

.bubble::after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 15px solid #fff;
  left: -15px;
  top: 15px;
}

Этим кодом мы получили сразу 2 выгоды. Первая - вы узнали, как создавать красивые блоки с комментариями, а вторая - вы узнали, как создавать треугольники на CSS с помощью свойства border. Меняйте значения border, чтобы добиться того треугольника, который вам нужен.

Итак, на этом все. Спасибо за внимание!