CSS基礎-如何用border寫三角形？

ygyooo 發布于2019-08-30 14:19 / 1944人閱讀

摘要：常用的的單值屬性指的是邊框。注意邊框交替處為斜邊，是個梯形，用此屬性寫三角形開始用邊框寫三角形，先將梯形變成三角形。下三角效果標簽設置成向下三角形透明

1.常用的border的單值屬性（border指的是邊框。）

/*邊框樣式屬性*/
border-style: solid;
/*邊框顏色*/
border-color: #06a43a;
/*邊框寬度*/
border-width: 10px;

其中border-style的屬性值有三種：
solid（實線），dashed（虛線為方塊），dotted(虛線為圓點)
border-style的屬性值-效果圖

其中顏色，寬度，樣式屬性值有四個方向。根據值的不同，對應的方向不同
點擊查看詳情

 border-width:
           四個值：上（10px）右（20px） 下（30px） 左（40px）
           border-width: 10px 20px 30px 40px;

           三個值：上（10px）右（20px） 下（30px） 左（20px）
           border-width: 10px 20px 30px ;

           兩個值：上（10px）右（20px） 下（10px） 左（20px）
           border-width: 10px 20px ;

           一個值：上下左右全是10px;
           border-width: 10px;

2.用border邊框寫三角行

(1)首先查看邊框特性，邊框交替的位置是斜線
下面是代碼，border邊框為梯形，點擊查看




    
    border標簽 part2

注意：邊框交替處為斜邊，是個梯形，用此屬性寫三角形

（2）開始用邊框寫三角形，先將梯形變成三角形。

1.設置寬高為0
2.給border-width設置值.
3.邊框設置顏色

梯形轉化為三角形




    
    border標簽 part2

（3）向下三角形

 1.設置div高寬為0
 2.設置border-width值
 3.其余三條邊為transparent（透明），視覺效果為下三角。

下三角效果




    
    border標簽 part2

GPU云服務器云服務器如何用css 如何用java寫圖表如何用python寫爬蟲如何用linux寫c

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115941.html

CSS基礎-如何用border寫三角形？

摘要：常用的的單值屬性指的是邊框。注意邊框交替處為斜邊，是個梯形，用此屬性寫三角形開始用邊框寫三角形，先將梯形變成三角形。下三角效果標簽設置成向下三角形透明 1.常用的border的單值屬性（border指的是邊框。） /*邊框樣式屬性*/ border-style: solid; /*邊框顏色*/ border-color: #06a43a; /*邊框寬度*/ border-width: ...

pepperwang 2019-08-02 10:04 評論0 收藏0
如何用css畫三角形

摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。在設計稿中，經常會出現好多三角形，如果將三角形變成圖片，通過img標簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

Yuqi 2019-08-30 13:06 評論0 收藏0
CSS3常見技巧（二）：如何用CSS3來實現三角形？

摘要：站長博客如何使用來畫一個三角形經常令人非常感到困惑，其實原理上是寬度相等的邊距以度來連接。代碼如下實現效果如圖站長博客：https://www.pipipi.net/ 如何使用CSS3來畫一個三角形經常令人非常感到困惑，其實原理上是寬度相等的邊距以45度來連接。首先看第一個圖showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

Jonathan Shieber 2019-08-30 15:55 評論0 收藏0
CSS3常見技巧（二）：如何用CSS3來實現三角形？

摘要：站長博客如何使用來畫一個三角形經常令人非常感到困惑，其實原理上是寬度相等的邊距以度來連接。代碼如下實現效果如圖站長博客：https://www.pipipi.net/ 如何使用CSS3來畫一個三角形經常令人非常感到困惑，其實原理上是寬度相等的邊距以45度來連接。首先看第一個圖showImg(https://segmentfault.com/img/bVbn3xN?w=576&h=3...

dantezhao 2019-08-02 14:12 評論0 收藏0