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

Question

我試圖做一個下拉菜單，沒有任何圖像，純CSS和HTML如下所示：

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

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

Answer 1

直播示例：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; 
} 

Answer 2

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

結果：

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

---

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

（the code to make it ）