css-border屬性的用法：利用css border屬性製作一個三角形

元素外邊距內就是元素的的邊框 (border)。元素的邊框就是圍繞元素內容和內邊據的一條或多條線。每個邊框都會有三個屬性：寬度、樣式，以及顏色。在下面的文章中,我們就來具體來從這三個方面來介紹不同的例子以及利用css border屬性來製作一個三角形。

我們先來看一看css border屬性所實現的效果:

 <style>div{    width: 100px; height: 50px;    border: 30px solid red;    border-right-color: green;    border-bottom-color: blue;    border-left-color:yellow;    }</style>

<div></div>

效果如下：

當我們把方框的寬度降低時,代碼如下:

<style>div{    width: 20px; height: 50px;    border: 20px solid red;    border-right-color: green;    border-bottom-color: blue;    border-left-color: yellow;    }</style>

<div></div>

效果如下：

當我們把元素寬高去掉後,代碼如下:

<style>div{    width: 0;     border: 50px solid red;    border-right-color: green;    border-bottom-color: blue;    border-left-color: yellow;    }</style>

<div></div>

效果如下：

此時我們發現當元素的寬高為0時就會變成擠在一起的四個三角形。因此，如果把其中的三條邊框的顏色定義為透明色transparent,那麼我們就會得到一個三角形！

將三條邊框的顏色設定為透明色：

<style>p{    width: 0;    border: 20px solid transparent;    border-top-color: blue;}</style>

<p></p>

運行效果如下：

通過代碼我們發現小三角的朝向是與設定了不透明顏色的那條邊名字相反的方向。

例如，我們設定了border-top-color: blue; 小三角的朝向是朝下的。

提示:

在我們使用小三角時，因為四條邊框組成了一個矩形，我們只是將其他三條邊設定了透明色，它們仍然在文檔裡佔據著位置，為了方便布局，我們可以設定小三角相對的那條邊為none；具體原理如下：

<style>div{   width: 0; height: 0;   border-top: 20px solid blue;   border-left: 20px solid red;   border-right: 20px solid green;   border-bottom: none;  }</style>

<div></div>

運行效果如下：

div{  width: 0;    border:20px solid transparent;   border-top: 20px solid blue;   border-bottom: none;}

<div></div>

運行效果如下：

應用：

當我們要製作這種布局時，可以用此種方法製作小三角，不必再用img或backgroud去實現。

<style>       ul {           overflow: hidden;       }              li {           list-style: none;           line-height: 60px;           text-align: center;           float: left;           width: 120px;           background: #f1f1f1;           margin-right: 1px       }              li p {           width: 0;           border: 8px solid transparent;           border-bottom-color: #666;           border-top: none;           float: right;           margin: 26px 10px 0 0       }   </style>

   <ul>       <li>我的課程<p></p></li>       <li>我的老師<p></p></li>       <li>學習時間長度<p></p></li>   </ul>

運行效果如下：

擴充一下：

<style>   div{       margin: 50px   }   div:nth-child(1){       width: 0;       border: 30px solid transparent;       border-bottom: 80px solid red;       /* border-top: none; */   }   div:nth-child(2){       width: 0;       border-top: 30px solid blue;       border-right:none;       border-left: 90px solid transparent;       border-bottom: none;   }   div:nth-child(3){       width: 0;       border-top: 30px solid blue;       border-right:90px solid transparent;       border-left: 10px solid transparent;       border-bottom: none;   }</style>

   <div></div>   <div></div>   <div></div>

運行效果如下：

相關文章推薦:

CSS border-left-color屬性_html/css_WEB-ITnose

CSS border邊框屬性教程(color style)

相關課程推薦:

CSS深入理解之border視頻教程