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

ec67d2c354694a2099ada1d5ca6b1e71.png

Как сверстать что-то подобное. Верстка в принципе понятна. Но проблема в треугольнике который отходит. Текст внутри меняется.
  • Вопрос задан
  • 856 просмотров
Решения вопроса 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)
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы