用CSS + HTML三角邊境一側標籤

Question

我需要的是這樣的 triangle side navigation tabs，我試圖做到這一點，使用：

.tabs input + label:after{ 
content:""; 
float:left; 
position:absolute; 
top:0; 
right:-12px; 
width:0; 
height:0; 
border-top: 15px solid black; 
border-left: 11px solid transparent; 
border-bottom: 16px solid black;  
} 

之後，但我有這樣的事情this

我需要的三角形側邊框爲1像素，感謝您的幫助。如果您包含JSFiddle，則爲 +1。

Answer 1

• 使用::before僞元素創建兩個Tringles，它們使用較深的顏色使用邊框坐在另一個之上。
• 接下來，用一個::after僞元素覆蓋與您的元素顏色相同的不必要的部分。這可以用相同的規則::before元件來完成，定位1px少到左側，以創建1px寬箭頭
• 最後，箭頭的尖端，添加一個1pxbox-shadow到兩者的右邊緣具有相同顏色的僞元素。注意：如果您希望箭頭變寬，則應該相應調整陰影。
• 請記住排除:first-of-type以避免在第一個元素之前有箭頭。

代碼：

li:not(:first-of-type)::before, li:not(:first-of-type)::after{ 
    content:''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: -10px; 
    width:0; 
    height:0; 
    border-style: solid; 
    border-width: 15px 0 15px 10px; 
    border-color: blue transparent; 
    box-shadow: 1px 0 0 blue; 
} 
li:not(:first-of-type)::after{ 
    left: -9px; 
    border-color: lightblue transparent; 
    box-shadow: 1px 0 0 lightblue; 
} 

小提琴：https://jsfiddle.net/ilpo/r5enysmf/