使用剪輯路徑的CSS麪包屑 - 需要「負面」座標

我想使用clip-path製作麪包屑路徑。使用剪輯路徑的CSS麪包屑 - 需要「負面」座標

#clip span { 
 
    padding: 3px 20px; 
 
    background-color: #666; 
 
    color: white; 
 
    display: inline-block; 
 
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); 
 
}

<div id="clip"> 
 
    <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span> 
 
</div>

其給出

雖然我喜歡該方法的簡單性，問題就來了從座標90%，這是相對於字的長度。因此「歡迎！」沒有與「微小」相同的箭頭角度。

當然，我可以添加兩個空白塊之間的詞將堅持以前和以下跨度，形如所需。

但有指定類似的「幾何」的方式座標的X-Windows風格的polygon，像-10px（這從一個元素的右邊/底部的計數;因此，對於一個100px的元素，會給出90px，意味着距元素的另一面10px）？

因此，規則，「幾何學」一樣，會是這樣的（這並不在CSS從左邊/頂部工作，因爲-10px計數）

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);

來源

2017-10-15 Ring Ø

我知道它有什麼做的問題，而是一個解決方案有：前/：元素之後將是一個替代你嗎？或者你知道如何做到這一點，但你需要看看如何使用剪輯路徑？ –

您是否嘗試過使用''（'nearest-side'或'farthest-side'），或者使用SVG'clip-path：url（#svgID）;'？ – Krusader

@Krusader我寧願避免使用SVG解決方案 - 至於「填充規則」，在這種情況下，您將如何使用它？ –

爲什麼不使用鈣並嘗試（100％ - 10px）。它會像一個負座標元素的權利：

#clip span { 
 
    padding: 3px 20px; 
 
    background-color: #666; 
 
    color: white; 
 
    display: inline-block; 
 
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); 
 
}

<div id="clip"> 
 
    <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span> 
 
</div>

來源

2017-10-15 13:10:10

儘可能簡單，謝謝（雖然有點擔心瀏覽器的支持）。不知道這是可能的CSS！ –

@ringø是的，我想過了，但我認爲你只會面對IE的問題 –

使用剪輯路徑的CSS麪包屑 - 需要「負面」座標

回答

相關問題