Фигурная стрелка с плавным переходом CSS

267

16 марта 2018, 12:11

Необходимо реализовать стрелку у сообщения такого рода:

Она имеет небольшие внутренние изгибы, в инете ничего не смог найти, везде обычные треугольники.

Я понимаю что легко можно добавить изображение, но мне хотелось бы разобраться как это сделать с помощью чистого css и возможно ли это вообще.

Answer 1

Рекомендую использовать SVG:

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
 
.text { 
  position: relative; 
  background-color: dodgerblue; 
  width: 200px; 
  padding: 25px; 
  margin: 25px; 
} 
 
.angle { 
  position: absolute; 
  top: -15px; 
  left: -44px; 
}

<div class="text"> 
  <div class="angle"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> 
      <path style="fill:dodgerblue;stroke:dodgerblue;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 25.37195,56.655495 c 0,0 19.463414,-5.908536 18.942072,-11.643292 l 0,24.503048 c 0,0 0,-3.823171 -18.942072,-12.859756 z"/> 
    </svg> 
  </div> 
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eaque saepe porro ex laudantium debitis praesentium beatae dolores maiores voluptates, qui animi vero non cum quisquam adipisci placeat iste provident? 
  </p> 
</div>