Svg прямоугольник с tri angular / закругленным концом для индикатора выполнения

Question

Я работаю над индикатором прогресса на основе SVG, который должен соответствовать изображению ниже. У меня возникли проблемы с достижением этого правильного конца. Сначала я попробовал это с помощью пути и получил нужную форму, но с помощью пути было трудно сделать его отзывчивым (высота и ширина должны легко изменяться). Также необходимо изменить ширину в зависимости от прогресса, хотя этого можно достичь, просто сдвинув весь путь / прямоугольник влево и скрыв переполнение.

Поэтому я хотел спросить, есть ли какой-нибудь простой метод для достижения этого с помощью простые формы SVG, такие как прямоугольник, поэтому с ними проще работать и не полагаться на сложные строки пути.

html и css также могут использоваться здесь для достижения этой формы.

Для справки так выглядит реализация пути (обратите внимание, что треугольник на конце имеет слегка закругленный конец и края)

<svg width="432px" height="39px" viewBox="0 0 432 39">
    <path d="M0.0724087765,38.0710052 L0.0724087765,0.0965500345 C275.055657,0.053915002 413.031521,0.053915002 414,0.0965500345 C415.452719,0.160502583 431.378608,16.7041591 431.378608,19.0837776 C431.378608,21.4633961 415.356767,38.0112767 414,38.0710052 C413.095489,38.1108242 275.119625,38.1108242 0.0724087765,38.0710052 Z" fill="red"></path>
</svg>

Пример изображения

Answer 1

Я бы упростил SVG, чтобы оставить только треугольную часть, а затем интегрировал бы ее в фон, где вы можете легко раскрасить оставшуюся часть с помощью простого градиента:

.box {
 background:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z' fill='red' /></svg>") right/auto 100%,
   linear-gradient(red,red) left/calc(100% - 40px) 100%;
 background-repeat:no-repeat;
 height:40px;
 margin:5px;
}

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="width:50px;"></div>



<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width=40>
  <path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z'fill='green' />
</svg>

Если вам нужна градиентная окраска, вы можете использовать SVG в качестве маски:

.box {
 -webkit-mask:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z' fill='red' /></svg>") right/auto 100%,
   linear-gradient(red,red) left/calc(100% - 40px) 100%;
 -webkit-mask-repeat:no-repeat;
 mask:
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z' fill='red' /></svg>") right/auto 100%,
   linear-gradient(red,red) left/calc(100% - 40px) 100%;
 mask-repeat:no-repeat;
 
 background:linear-gradient(blue,yellow);
 height:40px;
 margin:5px;
}

<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:100px;"></div>
<div class="box" style="width:50px;"></div>



<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width=40>
  <path d='M0 64 C40 56 64 44 64 34 C64 20 40 8 0 0 Z'fill='green' />
</svg>

Я использовал случайный SVG для иллюстрации, не стесняйтесь менять его своим: