純css 實現 三角形、梯形等 效果

　　今天一個剛開始學習html 的小白問我一個問題，css 能夠實現正方形，長方形，和圓型（border-radius），怎麼能作出個三角形、梯形等等形狀呢？因而我便開啓了裝逼模式， 給他講解了一下個人思路，在個人幫助下， 他終於用css 作出了本身的三角形、梯形。我表示很欣慰， 因而，爲了幫助更多像我這個朋友同樣基礎的小白，我決定獻醜，把個人思路，和作法寫成一篇博文，分享給你們。

 

　　閒話少敘，開始！

 

　　1，首先，我建立了一個 class 名爲 ‘box’ 的div，咱們暫且親切的稱它爲‘小盒子’

　　html：

    <div class='box'>
    </div>

 　　css：

 <!--小盒子的樣式-->
        .box
        {
            width:20px; 
            height:20px;
            background-color:blue;
            }
    

 　　咱們看一下效果， 其實就是一個普通的，背景顏色爲藍色的div。

　　

　　2，而後，咱們給‘小盒子’添加四條邊框樣式，邊框設置的寬一點， 四條邊框的顏色給不同的值， 方便咱們查看，

　　

.box
        {
            width:50px;
            height:50px;
            background-color:blue;
            
            border-top:50px solid red;
            border-right:50px solid yellow;
            border-bottom:50px solid green;
            border-left:50px solid pink;
            }

 　　看看效果， 已是一個比較花哨的存在了。

　　

　　3，而後，咱們把‘小盒子’的寬高設置爲0px，去掉藍色的背景色， 固然就只剩下四周的邊框了，腦補一下， 而後咱們上代碼，看卡效果。

.box
        {
            width:0px;
            height:0px;

            border-top:50px solid red;
            border-right:50px solid yellow;
            border-bottom:50px solid green;
            border-left:50px solid pink;
            }

　　來，上效果，look一下！童鞋們， 我麼彷佛已經看到了4個顏色不一樣的三角形了，接下來要作的步驟，就很清晰了。

　　

 

　　4，假設咱們想要一個向上的三角形，只要把‘小盒子’上、右、左 方向邊框的顏色設置爲透明， 就只剩下下邊框，也就是向上的小三角了， 來上代碼，look一下！

　　

        .box
        {
            width:0px;
            height:0px;

            border-top:50px solid rgba(0,0,0,0);
            border-right:50px solid  rgba(0,0,0,0);
            border-bottom:50px solid green;
            border-left:50px solid  rgba(0,0,0,0);
            }

　　看效果！綠色的向上的小三角就出現了， \(^o^)/

　　

 

-------------------------------第一階段-總結-------------------------------------

　　經過上面的操做，咱們已經成功的用css 作出了小三角形，是否是很簡單。

　　上面我說過了，也能夠作出梯形，該怎麼作呢？ 下面咱們一塊兒學習一下。↓

 

------------------------------------css作梯形---------------------------------------------

　　咱們先理理思路，你們想想，梯形是怎麼構成的，小學的數學課本都講過的，就拿等腰梯形來講， 是由兩個直角三角形，和一個長方形或正方形組成的，看草圖↓

　　

　　這意味着，咱們要用三個‘小盒子’來拼接成一個梯形，這麼一說你們的思路是否是豁然開朗了，

　　很少說，來，繼續分析，

　　1，首先，作三個‘小盒子’  1號，和3號小盒子都作成小三角形，2號小盒子作成一個正方形。

　　html：

    <div class='box'>
    </div>
    <div class='box2'>
    </div>
    <div class='box3'>
    </div>

　　css：

        .box,.box3
        {
            width:0px;
            height:0px;

            border-top:50px solid rgba(0,0,0,0);
            border-right:50px solid  rgba(0,0,0,0);
            border-bottom:50px solid green;
            border-left:50px solid  rgba(0,0,0,0);

            margin-bottom:10px;
            }

            .box2
        {
            width:50px;
            height:50px;
            background-color:green;
            }

　　先看看效果↓

　　

　　2，有人要問了， 形狀是出來了， 可是怎麼拼起來呢，這裏就要用到css中的定位指示 和 css3 裏的transfrom 了。不瞭解的話，w3c裏都有詳細的解釋，我這裏只管實現咱們要的效果。

　　3，先把全部的‘小盒子’排成一排，使塊狀元素排成一排的方法 ：能夠給‘小盒子’加 浮動 float，也能夠直接設置‘小盒子’的display：inline-block；因爲個人習慣是隻要加浮動， 就要給父元素清浮動，比較麻煩，我就直接設置‘小盒子’的display：inline-block 了。

　　

　　4,最後設置一下 1號，和3號小盒子 的位移 就ok了， 看代碼↓

　　　　　　 .box{
                transform: translate(54px,10px);
            }
            .box3{
                transform: translate(-54px,10px);
            }

　　再看看效果↓

　　

　　介紹到這裏， 咱們已經用css 把梯形作出來了， 還有其餘的圖形， 好比平行四邊形等，相似的東西，觸類旁通，均可以經過這種方法作出來，在這裏我就不一一介紹了。最後，祝你們學習愉快。