Изображение цитаты на css

Question

Как сделать блок цитаты на css как на рисунке? я так понял можно для блока задать border-radius, но как сделать в нижнем углу тот уголок с неострым узором, как-бы закруглённый? внутри будет текст

Answer 1

div{
position:relative;
width:300px ;
height:100px ;
background:red;
border-radius:20px;
}


div::before{
position:absolute;
content:"";
width:50px ;
height:50px ;
border-radius:50%;
background:red;
left:auto;
top:auto;
right:-3px;
bottom:-38px;
}
div::after{
position:absolute;
content:"";
width:40px ;
height:40px ;
border-radius:50%;
background:white;
left:auto;
top:auto;
right:-10px;
bottom:-34px;
}

<div></div>

Answer 2

Раздавливаем фоновый svg внутренними отступами

Svg рисовал в inkscape =>

.chat {
  width: 500px;
  min-heigth: 150px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='16 102 112 36' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='m120.73 102.41-96.629 1e-5c-6.767 0.0671-6.5995 3.202-7.143 6.7462l0.19842 12.897c0.26448 4.251-0.28188 7.5569 5.7541 8.1351l89.684-0.39683c3.9156 2.4626 4.9583 5.1645 14.683 7.143-2.1042-2.8309-3.9905-5.6255-2.9762-7.9367 2.7857-0.71967 3.4043-2.4159 3.5715-5.7541l-0.39683-15.675c-0.11111-2.5985-2.0477-5.1089-6.7462-5.1588z' fill='%23fff' stroke='%23000' stroke-width='.02px'/%3E%3C/svg%3E%0A");
  background-size: cover;
  filter: drop-shadow(0 0 40px lightblue);
  padding-top: 10px;
  padding-bottom: 100px;
}

.chat p {
  width: 90%;
  margin: auto;
}

<div class="chat">
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse ipsa totam voluptas doloribus numquam assumenda ad culpa aspernatur molestias sequi optio sunt praesentium necessitatibus perspiciatis, est debitis. Recusandae, labore necessitatibus non dolor
    vel eaque facere minima reiciendis rerum, aperiam incidunt blanditiis earum alias
  </p>
</div>

БЛОГ НА HUSL

Изображение цитаты на css

Ответы (2 шт):