創建多級按鈕

Question

我試圖創建一個多窗體具有以下按鈕：

但我對如何與這個開始毫無頭緒。有人可以在我的路上幫助我嗎？也許是一個好資源？我也在我的應用程序中使用bootstrap。

現在我有：

我的HTML看起來像這樣：

<ol class="multi-step"> 
    <li class="active"> 
     <a href="http://mydomain/nl/data-analysis/templates"> 
      <span class="number-circle">1</span> 
      Maak een sjabloon  </a> 
    </li> 
    <li class=""> 
     <a href="http://mydomain/nl/data-analysis/scheduler"> 
      <span class="number-circle">2</span> 
      Plan je sjabloon  </a> 
    </li> 
    <li class=""> 
     <a href="http://mydomain/nl/data-analysis/reports"> 
      <span class="number-circle">3</span> 
      Bekijk de resultaten  </a> 
    </li> 
</ol> 

Answer 1

試試這個 化妝用僞元素

CSS

.multi-step{ 
    list-style-type:none; 
    padding:0; 
} 
.multi-step > li{ 
    display:inline-block; 
    margin: auto 20px; 
} 
.multi-step > li > a{ 
    display:block; 
    padding:10px 5px; 
    background-color: blue; 
    color:#fff; 
    position: relative; 
} 
.multi-step > li > a::after, 
.multi-step > li > a::before{ 
    content:""; 
    position: absolute; 
    height:0; 
    top:0; 
    bottom: 0; 
    width:0; 
    border:19px solid red; 
} 
.multi-step > li > a::before{ 
    left:-35px; 
    border-left-color:transparent; 
} 
.multi-step > li > a::after{ 
    right:-38px; 
    border-color:transparent; 
    border-left-color:red; 
} 

風格相應

reference link

希望這有助於..

Answer 2

所以，在獲取頁面上呈現HTML一切都只是一個不同大小的矩形。它可能不會以這種方式出現，但所有東西都有一個邊界框，它決定了它在頁面上的存在。

有迂迴的方式來創建形狀（如給予50％border-radius只是把它變成一個圓圈），但他們只是這樣，他們不是很理想。

什麼是構成形狀的東西是SVG，在這裏你可以將矢量繪製到你自己的規範的頁面上。

但是，我質疑你所展示的內容是構成「設計」還是僅僅是看起來有某種特定意義的元素。

---

我能拿出最好的解決方案：

1. 插入兩個元素，並使用CSS transform屬性skew一個單向和一個其他的方式：

<div id="bar"> 
    <div class="arrow"> 
    <a>asdf</a> 
    </div> 
    <div class="arrow"> 
    <a>hjkl</a> 
    </div> 
    <div class="arrow"> 
    <a>qwer</a> 
    </div> 
</div> 

#bar { 
    display: flex; 
    padding: 10px; 
} 

.arrow a { 
    position: absolute; 
    line-height: 100px; 
    margin-top: -50px; 
    width: 200px; 
    margin-left: 25px; 
    text-align: center; 
    z-index: 1; 
} 

.arrow::before { 
    content: ''; 
    background: blue; 
    height: 50px; 
    width: 200px; 
    margin-left: 25px; 
    display: block; 
    transform: skew(45deg); 
} 

.arrow::after { 
    content: ''; 
    background: blue; 
    height: 50px; 
    width: 200px; 
    margin-left: 25px; 
    display: block; 
    transform: skew(-45deg); 
} 

https://jsfiddle.net/7nku4474/1

---

使用SVG以繪製形狀：

<div id="bar"> 
    <a href="asdf"> 
    <svg fill="blue"> 
     <path d="M 0,0 L 200,0, L 250,50 L 200,100 L 0,100 L 50,50 Z"> 
     </path> 
     <text x="125" y="50" font-size="12" fill="#fff" text-anchor="middle" alignment-baseline="central"> 
     asdf 
     </text> 
    </svg> 
    </a> 

    <a href="asdf"> 
    <svg fill="blue"> 
     <path d="M 0,0 L 200,0, L 250,50 L 200,100 L 0,100 L 50,50 Z"> 
     </path> 
     <text x="125" y="50" font-size="12" fill="#fff" text-anchor="middle" alignment-baseline="central"> 
     hjkl 
     </text> 
    </svg> 
    </a> 

    <a href="asdf"> 
    <svg fill="blue"> 
     <path d="M 0,0 L 200,0, L 250,50 L 200,100 L 0,100 L 50,50 Z"> 
     </path> 
     <text x="125" y="50" font-size="12" fill="#fff" text-anchor="middle" alignment-baseline="central"> 
     qwer 
     </text> 
    </svg> 
    </a> 
</div> 

#bar { 
    display: flex; 
} 

#bar svg { 
    height: 100px; 
    width: 250px; 
    margin: 10px; 
} 

#bar a:not(:first-of-type) { 
    margin-left: -50px; 
} 

https://jsfiddle.net/1smpuL1r/