带白色边框的三角形

问题描述：

如何使用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 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

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

让我检查，因为我在FF中制作。 Firefox自己添加了一个灰色边框，Chrome不显示这种行为。所以，白色边框不可见。 – 2013-02-16 10:36:37

其实它的作品，我只是没有看到它，因为白色背景上的白色边框:) – 2013-02-16 10:37:06

带白色边框的三角形

相关推荐