帶白色邊框的三角形

如何使用CSS創建帶有白色邊框的三角形？像下面的圖片一樣。帶白色邊框的三角形

enter image description here

當我加入這個CSS

.triangle { 
    width:0; 
    height:0; 
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent; 
    position:relative; 

} 
.triangle:before { 
    content:''; 
    width:0; 
    height:0; 
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent; 
    position:absolute; 
    top:-10px; 
    left:-17px; 
}

結果是

enter image description here

來源

2013-02-16 Pawan Lakhara

我很高興地看到，如果有人能拉這一關。 – 2013-02-16 10:21:26

請添加您的代碼。這是一個有趣的問題，但沒有人會從頭開始。 – qben 2013-02-16 10:22:49

看到這個http://jsfiddle.net/6vNTN/ – 2013-02-16 10:25:13

CSS：

.triangle { 
    width:0; 
    height:0; 
    border-top: 20px solid transparent; 
    border-left: 20px solid white; 
    border-bottom: 20px solid transparent; 
    position:relative; 

} 
.triangle:before { 
    content:''; 
    width:0; 
    height:0; 
    border-top: 10px solid transparent; 
    border-left: 10px solid red; 
    border-bottom: 10px solid transparent; 
    position:absolute; 
    top:-10px; 
    left:-17px; 
}

HTML：

<div class="triangle"></div>

Fiddle

來源

2013-02-16 10:33:50

小提琴不適合我在Chrome中工作 – 2013-02-16 10:35:59

讓我檢查，因爲我在FF中製作。 Firefox自己添加了一個灰色邊框，Chrome不顯示這種行爲。所以，白色邊框不可見。 – 2013-02-16 10:36:37

其實它的作品，我只是沒有看到它，因爲白色背景上的白色邊框:) – 2013-02-16 10:37:06

帶白色邊框的三角形

回答

相關問題