如何使用css製作雙色單邊界？

夥計們實際上我需要幫助，使一個單邊界雙色。這意味着使用CSS的單線25％的紅色和其他75％的藍色。如何使用css製作雙色單邊界？

我非工作代碼：

element { 
    border-bottom:2px solid red; 
    position:relative; 
    z-index:999; 
    opacity:1;

我認爲它可以通過:before和:after僞元素是可能的。

來源

2015-11-14 Saurabh Singh Mehra

請記住，這是沒有平臺請求爲「我不能這樣做，請爲我做。「 – KittMedia

[CSS三角形自定義邊框顏色]可能的重複（http://stackoverflow.com/questions/9450733/css-triangle-custom-border-colo r） – Jan

這也可以通過使用像這裏提到的'border-image'和漸變來實現 - http://stackoverflow.com/questions/32781360/css-border-colour-into-4-colours/32781447#32781447。 IE（IE11 +）的瀏覽器支持非常低，但這是用多種顏色創建邊框的理想方法。 – Harry

HTML：

<div class="element"></div>

CSS：

.element { 
    border-bottom: 2px solid #00f; 
    position: relative; 
} 

.element::before { 
    background-color: #f00; 
    content: ""; 
    height: 2px; 
    position: absolute; 
    width: 25%; 
}

演示： JSFiddle

來源

2015-11-14 17:05:19 KittMedia

非常感謝您的幫助。 –

如何使用css製作雙色單邊界？

回答

相關問題