您當前位置：首頁 > web前端 > htmlcss > 用CSS border相關屬性畫三角形

用CSS border相關屬性畫三角形

來源：程序員人生發布時間：2014-08-16 17:14:52 閱讀次數：5884次

用CSS border相關屬性畫三角形，大家在制作網站前端的是時候，經常喜歡在新聞或者產品分類列表前面加一個小三角形，這樣比較美觀。通常的做法是直接用PS繪制小三角形，然后設置成背景色就可以了，今天我就來教大家如何直接用CSS border相關屬性畫三角形，純CSS代碼繪制三角形，牛逼了吧
效果如下：

HTML代碼如下

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>CSS Triangle Demo</title>

    <link rel="stylesheet" href="triangle.css">

  </head>

  <body>

    <h3>Down Triangle</h3>

    <div class="down-triangle">

    </div>

    <h3>Up Triangle</h3>

    <div class="up-triangle">

    </div>

    <h3>Left Triangle</h3>

    <div class="left-triangle">

    </div>

    <h3>Right Triangle</h3>

    <div class="right-triangle">

    </div>

  </body>

</html>

CSS代碼如下：

.down-triangle {

   width: 0;

   height: 0;

   border-width: 10px 10px 0 10px;

   border-style: solid;

   border-color: #dc291e transparent;

}

.up-triangle {

   width: 0;

   height: 0;

   border-width: 0px 10px 10px 10px;

   border-style: solid;

   border-color: #dc291e transparent;

}

.left-triangle {

   width: 0;

   height: 0;

   border-width: 10px 10px 10px 0px;

   border-style: solid;

   border-color: transparent #dc291e;

}

.right-triangle {

   width: 0;

   height: 0;

   border-width: 10px 0px 10px 10px;

   border-style: solid;

   border-color: transparent #dc291e;

}

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 關于 HTML5 調用用戶的照相機、相冊初步整理

下一篇 Struts之action的請求接受參數

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

用CSS border相關屬性畫三角形