修剪上一個div的頂部有一個小三角空

我試圖做一個下拉菜單，沒有任何圖像，純CSS和HTML如下所示： enter image description here 修剪上一個div的頂部有一個小三角空

我不能做什麼是使這個小三角形修剪頂部

是否有可能在CSS中，如果是，如何？

來源

2013-03-08 ImadBakir

使用相同的圖像？ – hjpotter92 2013-03-08 15:00:32

如果可以在不使用圖像的情況下完成，我不想使用圖像。 – ImadBakir 2013-03-08 15:02:08

直播示例：http://jsbin.com/owafod/1/

我用CSS triangle generator創建三角形。

#Nav { 
    width: 300px; 
    height: 200px; 
    background: #333; 
} 

#Triangle { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 10px 0 10px; 
    border-color: #ffffff transparent transparent transparent; 
    margin: 0 auto; 
}

來源

2013-03-08 15:04:45 JSuar

哇。非常感謝，仍然看到令人驚訝的代碼，想知道它是如何完成的。 – ImadBakir 2013-03-08 15:07:04

@sorfect，很高興我能幫到你。 – JSuar 2013-03-08 15:11:32

這裏是有邊界的解決方案：

結果：

enter image description here

HTML：

<div id=a></div><div id=b></div> 
    <div id=c></div>

CSS：

#a { 
    border-right: 5px solid white; 
    border-bottom: 5px solid black; 
    width: 100px; 
    display: inline-block; 
    margin:0; 
} 
#b { 
    border-left: 5px solid white; 
    border-bottom: 5px solid black; 
    width: 100px; 
    display: inline-block; 
    margin:0; 
} 
#c { 
    background: black; height:20px;width:210px 
}

Tests

而這裏的，可能就足以解釋它是如何做，你怎麼能輕易使用這種邊界招的圖片：

enter image description here