css-border屬性的用法：利用css border屬性製作一個三角形-css教學-PHP中文網

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

不言

發布： 2018-07-28 15:19:18

原創

2299 人瀏覽過

元素外邊距內就是元素的的邊框 (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>

登入後複製

效果如下：

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

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

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

登入後複製

效果如下：

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

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

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

登入後複製

<div></div>

登入後複製

效果如下：

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

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

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

登入後複製

<p></p>

登入後複製

運行效果如下：

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

透過程式碼我們發現小三角的朝向是與設定了不透明顏色的那條邊名字相反的方向。 例如，我們設定了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>

登入後複製

運行效果如下：

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

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

登入後複製

<div></div>

登入後複製

運行效果如下：

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

應用程式：

當我們要製作這個佈局時，可以用此種方法製作小三角，不必再用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>

登入後複製

   
       我的课程<p></p>
       我的老师<p></p>
       学习时长<p></p>

登入後複製

運行效果如下：

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

擴展一下：

<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屬性的用法：利用css border屬性製作一個三角形

#相關文章推薦:

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

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

相關課程推薦:

CSS深入理解之border影片教學

以上是css-border屬性的用法：利用css border屬性製作一個三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章！