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
}

テスト

---

そして、これがどのように作られ、この種のボーダートリックをどのように簡単に使用できるかを説明するのにおそらく十分な写真です:

(それを作るためのコード)