HTML/CSS - DIVの片側に「矢印」を作成

Question

私は矢印のように一方の端にポイントを与えるためにdivを変換しています。私は2番目のdivとその境界線を45度回転させるCSS変換を使ってこれを達成しました。私の問題は、元の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>