css 带箭头的进度条

HTML:
     <div class="progress-bar">
      <div class="progress" style="width: 50%;"></div>
     </div>

CSS:
   .progress-bar {
     width: 200px;
     height: 20px;
     background-color: #ddd;
     position: relative;
    }

   .progress {
     height: 100%;
     background-color: #007bff;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 1;
     clip-path: polygon(0 0, calc(100% - 15px) 0, 80% 100%, calc(100% - 10px) 100%, 0 100%);
    }

   .progress::after {
     content: "";
     display: block;
     width: 0;
     height: 0;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     border-left: 10px solid #007bff;
     position: absolute;
     right: 0;
     top: 0;
   }

第二种

修改css

   clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 93%, calc(100% - 10px) 100%, 0 100%);