Задать вопрос

Как сверстать рамку в виде сообщения?

ec67d2c354694a2099ada1d5ca6b1e71.png

Как сверстать что-то подобное. Верстка в принципе понятна. Но проблема в треугольнике который отходит. Текст внутри меняется.
  • Вопрос задан
  • 1407 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Как-то так: ( jsfiddle.net/DelphinPRO/vfhcdu2q/ )
<div class="bubble">
    <div class="bubble-in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsa quisquam deserunt rerum repellendus consequuntur iste inventore et dolorum natus. Suscipit saepe facilis fugit reprehenderit earum. Quibusdam expedita iusto mollitia!
    </div>
</div>


.bubble {
    width: 300px;
    border-radius: 15px;
    border: 3px solid #1AA0D2;
    display: inline-block;
    position: relative;
}
.bubble::after {
    content: '';
    width: 39px;
    height: 50px;
    border-left: 3px solid #1AA0D2;
    border-bottom: 5px solid #1AA0D2;
    position: absolute;
    bottom: -20px;
    left: 40px;
    background: white;
    transform: skewX(-30deg) skewY(-48deg);
}
.bubble-in {
    border-radius: 12px;
    padding: 30px;
    background: white;
    position: relative;
    z-index: 2;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@pchelovek
HTML-верстальщик
Вот каляка-маляка на скорую руку: jsfiddle.net/gpr1eczs/1
Но надо ли?
Ответ написан
Комментировать
верстать не надо это картинка на котором написан текст через панель разработчика посмотри (F12)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы