將邊框添加到CSS三角形的兩側？

HTML：將邊框添加到CSS三角形的兩側？

<div class="arrow-right"></div>

CSS：

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 60px solid green; 
}

結果：

有沒有什麼方法可以讓我產生對結果雙方1個像素的邊界？（非180度的）？

感謝

來源

2013-07-22 jskidd3

，你可以提供你想要的邊境一個簡單的圖片？ – Termis

CSS三角形*是*邊框，因此向其添加邊框沒有多大意義。然而，這是可能的 - 請參閱http://cssarrowplease.com/ – Spudley

100％純CSS，沒有......但在裏面添加一個額外的div和：

HTML

<div class="arrow-right"> 
    <div></div> 
</div>

CSS

.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 60px solid black; 
} 
.arrow-right > div { 
    width: 0; 
    position: relative; 
    left: -60px; 
    top: -59px; 
    border-top: 59px solid transparent; 
    border-bottom: 59px solid transparent; 
    border-left: 59px solid green; 
}

http://jsfiddle.net/qJJxm/

（較小的編號代替59每個實例，使更廣泛的邊界 - 所有四個應始終是相同的號碼）

來源

2013-07-22 16:33:58 joequincy

或者，正如Jose Rui Santos在他的回答中提到的，如果您只針對支持它們的瀏覽器，則可以使用僞類。 – joequincy

感謝您的解決方案，完美的作品。出於兼容性原因，請選擇此答案。 – jskidd3

您可以通過before或after僞元素添加邊框，移動一個像素到左邊。

.arrow-right, 
.arrow-right:after { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 60px solid black; 
} 

.arrow-right:after { 
    border-left-color: green; 
    content: ''; 
    display: block; 
    position: relative; 
    left: -61px; 
    top: -60px; 
}

http://jsfiddle.net/Nh63r/

來源

2013-07-22 16:36:35

幹得好！沒有別的CSS！ – SaidbakR

@sємsєм是的，但在IE <8時不起作用。 – joequincy

也許在IE <8中缺少邊界並不是什麼大問題。這就是所謂的「優雅退化」，請參閱http://dowebsitesneedtolookexactlythesameineverybrowser.com/（實際上，本網站在某些瀏覽器中的呈現方式不同） –

將邊框添加到CSS三角形的兩側？

回答

相關問題