HTML/CSS - 在DIV的一側創建一個「箭頭」

Question

我正在轉換一個div，在箭頭的一端給它一個點。我已經完成了這個使用第二個div和CSS轉換來將其邊框旋轉45度。我的問題是原始div流血的背景，仍然形成一個正方形。我該如何解決這個問題？我在下面的鏈接中創建了一個小提琴，我希望「步驟1」的藍色背景在點而不是平坦邊緣處結束。謝謝。 Fiddle

<ul class="progress"> 
    <li class="completed"> 
     <span> 
      <span class="order">1 </span>Step 1 
     </span> 
     <div class="diagonal"></div> 
    </li> 
    <li> 
     <span> 
      <span class="order">2 </span>Step 2 
     </span> 
     <div class="diagonal"></div> 
    </li> 
    <li> 
     <span> 
      <span class="order">3 </span>Step 3 
     </span> 
    </li> 
</ul> 

CSS：

.progress { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    height: 40px; 
    margin: 0 0 1em; 
    padding: 0; 
} 

.progress > li { 
    width: 100% !important; 
    height: 100% !important; 
    border-radius: 0 !important; 
    color: #fff !important; 
    list-style: none; 
    font-size: 16px; 
    z-index: 100; 
    background-color: #bbb; 
    overflow: hidden; 
} 

.progress > li:last-child { 
    border-right: 0; 
} 

.progress > li.completed { 
    background-color: #0071bc; 
} 

.progress > li span { 
    position: relative; 
    top: 5px; 
} 

.progress > li span .order { 
    display: inline-block; 
    border: 2px solid #555; 
    border-radius: 27px; 
    width: 27px; 
    height: 27px; 
    background-color: #fff; 
    color: #555; 
    margin: 0 5px 0 10px; 
    font-weight: bold; 
    text-align: center; 
    position: relative; 
    top: -1px; 
    line-height: 25px; 
} 


.diagonal { 
    width: 28px; 
    height: 28px; 
    position: relative; 
    float: right; 
    top: -7px; 
} 

.diagonal:after { 
    content: ""; 
    position: absolute; 
    border-top: 2px solid #f5f5f5; 
    border-right: 2px solid #f5f5f5; 
    width: 38px; 
    height: 38px; 
    transform: rotate(45deg); 
    transform-origin: 0% 0%; 
} 

Answer 1

您可以通過設置一個透明的頂部和底部邊框做那樣的右箭頭/三角形，然後給顏色的左邊框你想要的箭頭是。然後對其進行設計，使其適用於您的佈局。

.progress { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    height: 40px; 
 
    margin: 0 0 1em; 
 
    padding: 0; 
 
} 
 

 
.progress > li { 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    border-radius: 0 !important; 
 
    color: #fff !important; 
 
    list-style: none; 
 
    font-size: 16px; 
 
    background-color: #bbb; 
 
    position: relative; 
 
} 
 

 
.progress > li:last-child { 
 
    border-right: 0; 
 
} 
 

 
.progress > li.completed { 
 
    background-color: #0071bc; 
 
} 
 

 
.progress > li:not(.completed) { 
 
    padding-left: 20px; 
 
} 
 

 
.progress > li span { 
 
    position: relative; 
 
    top: 5px; 
 
} 
 

 
.progress > li span .order { 
 
    display: inline-block; 
 
    border: 2px solid #555; 
 
    border-radius: 27px; 
 
    width: 27px; 
 
    height: 27px; 
 
    background-color: #fff; 
 
    color: #555; 
 
    margin: 0 5px 0 10px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    position: relative; 
 
    top: -1px; 
 
    line-height: 25px; 
 
} 
 

 
.diagonal { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 20px solid #bbb; 
 
    top: 0; right: 0; 
 
    position: absolute; 
 
    transform: translateX(100%); 
 
    z-index: 1; 
 
} 
 
.completed .diagonal { 
 
    border-left-color: #0071bc; 
 
}

<ul class="progress"> 
 
    <li class="completed"> 
 
     <span> 
 
      <span class="order">1 </span>Step 3 
 
     </span> 
 
     <div class="diagonal"></div> 
 
    </li> 
 
    <li> 
 
     <span> 
 
      <span class="order">2 </span>Step 2 
 
     </span> 
 
     <div class="diagonal"></div> 
 
    </li> 
 
    <li> 
 
     <span> 
 
      <span class="order">3 </span>Step 3 
 
     </span> 
 
    </li> 
 
</ul>