我正在編寫一個進度條，這個進度根據javascript的程度而增減。如果進度條不工作也沒關系，但我想在這個條的末尾添加一個三角形svg，并使其成為箭頭形狀。

我做的進度條是這樣的: 我的想法

但我希望它看起來像這樣: 我想怎么做

進度條的html結構如下:

<div class="progress-container">
     <div class="progress__fill"></div>
</div>

下面是進度條javascript代碼:

<script >
    function updateProgressBar(progressBar) {
        progressBar.querySelector(".progress__fill").style.width = VALUE;
    }
const myProgressBar = document.querySelector(".progress-container");
updateProgressBar(myProgressBar); </script>

正如你所看到的，它根據進度條值變量而變化，所以我不知道如何在最后添加三角形形式的svg。

要準確回答您的問題，請查看片段。 現在你有另一種方法在偽類之后用css三角形來做這件事

let VALUE = '50%';

function updateProgressBar(progressBar) {
  progressBar.querySelector(".progress__fill").style.width = VALUE;
}
const myProgressBar = document.querySelector(".progress-container");
updateProgressBar(myProgressBar);

.progress-container {
  width: 100%;
  height: 24px;
  background-color: darkgray;
  border-radius: 10px;
}

.progress__fill {
  float: left;
  background-color: red;
  width: 25%;
  height: 100%;
  border-radius: 10px;
}

.progress-container svg {
  float: left;
  width: 48px;
  height: 48px;
  margin-top: -12px;
  margin-left: -10px;
}

<br>
<div class="progress-container">
  <div class="progress__fill"></div>
  <svg id="svgTriangle" fill="#ff0000" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="M 0,48 V 0 l 48,24 z" />
    </svg>
</div>