html - 在 div 顶部修剪一个小的空三角形

Question

我正在尝试制作一个没有任何图像、纯 CSS 和 HTML 的下拉菜单，如下所示：

我不能做的是在顶部做这个小三角形装饰

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

Answer 1

现场示例：http: //jsbin.com/owafod/1/

我使用CSS 三角形生成器来创建三角形。

#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
}

测试

---

这是一张可能足以解释它是如何制作的以及如何轻松使用这种边框技巧的图片：

（制作它的代码）