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

Question

[Владимир Голубь]

Как сверстать что-то подобное. Верстка в принципе понятна. Но проблема в треугольнике который отходит. Текст внутри меняется.

Answer 1

[Сергей delphinpro]

Как-то так: ( 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;
}

Answer 2

[Александр]

Вот каляка-маляка на скорую руку: jsfiddle.net/gpr1eczs/1
Но надо ли?

Answer 3

[The Dragger]

верстать не надо это картинка на котором написан текст через панель разработчика посмотри (F12)

Comments

[Владимир Голубь]

те это не div такой ? Мне по z-index сделать ? Это не сайт рабочий это макет в psd.

[The Dragger]

ну да можно и так

[The Dragger]

такой угол нереально наверн нарисовать через css