更改進度條中箭頭的形狀

Question

我正在處理 angular 應用程序，我正在其中制作進度條。 我的代碼如下：

CSS：

.progressbar {
      height: 56px;
      background: lightgray;
      box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
      animation: change 1s linear infinite;
      margin: 5px -10px;
      clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
    }
    .progressbar:first-child {
      margin-left: 0;
      clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
    }
    .progressbar:last-child {
      margin-right:0;
    }
    .bar {
      display:flex;
      gap:20px; /*You can use now this property to play with the separation between the bars*/
    }
    .progressbar.active{
      background: 
    linear-gradient(to right, red 0%, yellow 50%, green 34%)
      left/var(--p, 100%) fixed,
    lightgray;
      box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
    }

HTML：

<div class="bar">
    <div class="progressbar active" style="width:100%;"></div>
    <div class="progressbar" style="width:100%;"></div>
    <div class="progressbar" style="width:100%;"></div>
</div>

有了這個，我得到了這樣的進度條 . 這非常接近我想要的結果。 但是用這個代碼箭頭形狀的條是不合適的。 我想要的箭頭形狀是 . 我怎樣才能改變我的酒吧的形狀完全相同，如圖所示。

Answer 1

• 向選項卡添加負右邊距（+所需的間隙大小）
• 向父包裝器（相同大小）添加正 margin-right

只需兩個 CSS 變量--d和--gap輕松實現。 編輯它們的值以獲得所需的結果：

 /*Quick Reset*/ * { margin: 0; box-sizing: border-box; } body { font: 1rem/1.3 sans-serif; } /* * Progressbar */.bar { --d: 1rem; /* arrow depth */ --gap: 0.3rem; /* arrow thickness, gap */ display: flex; margin-right: var(--d); }.bar-step { flex: 1; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0.6rem var(--d); margin-right: calc(var(--d) * -1 + var(--gap)); background: #d9e3f7; color: #23468c; clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50% ); }.bar-step:first-child { clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100% ); }.bar-step.active { background: #23468c; color: #fff; }

 <div class="bar"> <div class="bar-step active">Step 1</div> <div class="bar-step">Step 2 text</div> <div class="bar-step">Step 3</div> <div class="bar-step">Step 4</div> </div>