使用Css和Div ”畫“個三角形

看到這個導航的時候就在想這種三角是否可以通過css和html實現，於是就在網上找了找資料。整理如下：
1.思路很簡單。看下面的圖片(每條邊是不是像三角形的底邊）

html:

<div class="triangle"></div>

Css:

         
   .triangle{   
            border-style:solid;
            border-width: 10px;
            border-top-color:#009246;
            border-left-color: #CE2B37;
            border-bottom-color:#5E5E5E;
            border-right-color: #000;
 }

2. 當div元素的寬度和高度是0的時候是什么樣呢（其他屬性不變，把width和height都設置為0）？

是不是每條邊都是一個三角形了？

如果想讓他大點，就把border-width屬性值設置的大點。

3. 假如我們想要一個向上的三角形，那我們不要顯示其他三個邊，保留底邊（border-bottom)就可以了。所以把其他三條邊的（border-color）設置成transparent好了，再看效果。

三角形就出來了。

 

如果想要調整三角形的位置，可以通過設置div.triangle{position:relative; top:0;right:10px;}的屬性來設置了。

 

最后是這個結果：

代碼如下：

<!--html-->
<div class="triangle"></div>
<div class="drop-down">呵呵，把這個div放到三角div后面，背景色和那個border-color顏色設置成一樣就好了</div>

 

/*Css*/
       .triangle{
            width:0px;
            height:0px;
            border-style:solid;
            border-width: 10px;
            border-color:transparent;
            border-bottom-color:#5E5E5E;
            position:relative;
            top:0;
            left:20px;
        }
        .drop-down{
            width:150px;
            padding:10px;
            border-radius:5px;
            background:#5E5E5E;
            color:white;
        }

 

延伸：如果使用偽元素:before 和:after呢，這樣就不必搞一個空白的div元素了（原理自然和上面使用空白div是一樣的）。

如果箭頭在上面和左側，就用:before；右側和下面，就用:after 吧。

<!--html-->
<div class="no-empty-div">我們不需要空白的div來實現箭頭了</div>

/*Css*/
        .no-empty-div{
            width:150px;
            padding:10px;
            border-radius:5px;
            background:#5E5E5E;
            position:relative;
      
        }
        .no-empty-div:before{
            content:"";
            display: block;
            border-color: transparent;
            border-bottom-color: #5E5E5E;
            border-width: 10px;
            border-style:solid;
            width:0;
            height:0;
            position:absolute;
            bottom:100%;
            right:50%;
        }

 下面是一個向左箭頭的（你可以和向上的代碼對照看一下位置的改變）：

<!--html-->
<div class="no-empty-div">我們不需要空白的div來實現箭頭了</div>

/*Css*/
  .no-empty-div{
            width:150px;
            padding:10px;
            border-radius:5px;
            background:#5E5E5E;
            position:relative;
        }
        .no-empty-div:before{
            content:"";
            display: block;
            border-color: transparent;
            border-right-color: #5E5E5E;
            border-width: 10px;
            border-style:solid;
            width:0;
            height:0;
            position:absolute;
            top:20%;
            right:100%;
        }