章節劃分與使用權幾分圓潤箭頭CSS邊框

您好，我需要有這樣的章節劃分。問題是製作正確的箭頭，但對我來說最重要的是使用邊框，所以我可以很容易地操作它（例如，更改顏色，寬度等）有沒有什麼常用的解決方案？最好是用純CSS來解決這個問題，但如果你知道其他解決方法，請提出建議。

2017-04-21 Aghasi Grigoryan

就我所知，CSS不支持這種形狀。如果你想避免使用圖像，也許看看SVG。 – kalsowerus

像這樣的東西？

.menu-item::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: -11px; 
    background-color: red; 
    width: 20px; 
    height: 22px; 
    background-color: #cccccc; 
    z-index: 1; 
    transform: rotate(45deg) translateY(-50%); 
    transform-origin: top; 
    border-radius: 5px; 
    border-top: solid 2px rgb(236, 240, 241); 
    border-right: solid 2px rgb(236, 240, 241); 
}

https://jsfiddle.net/punb5k49/

你可以做一個矩形，並使其旋轉45deg，並有邊框半徑有這樣的效果。不完美的，但最好再沒有什麼

編輯*

，如果你不明白我的意思，看到這個形象，它與我的jsfiddle比較

來源

2017-04-21 08:06:50

您可以檢查這裏的解決方案通過使用border屬性： -

<html> 
<head> 
<style> 
.bordr{ 
     height: 30px; 
    width: 30px; 
    background: transparent; 
    border-radius: 2px; 
    border-right: 1px solid red; 
    border-bottom: 1px solid red; 
    transform: rotate(-45deg); 
} 
</style> 
</head> 
<div class="bordr"> 
</div> 
</html>

https://jsfiddle.net/xakdeyea/

來源

2017-04-21 08:17:51 Rupal

章節劃分與使用權幾分圓潤箭頭CSS邊框

回答

相關問題