CSS實現三角形、梯形、平行四邊形、圓形、橢圓形、對話框、自適應正方形

本文篇幅較長，希望能堅持看完，轉載請注明出處，如果覺得好文請給個贊吧

CSS實現梯形

CSS實現三角形和梯形主要是依靠border是梯形的特性來做的，有點像相框的那種感覺。

首先我們先給一個正方形設置比較寬的邊框。如下。

 

 

<div id="test1"></div>
    <style>
#test1{
    width: 50px;
    height: 50px;
    background: purple;
    border-top: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid blue;
    border-right: 50px solid yellow;
    margin:0 auto;
}
</style>

然后把其他顏色設置成看不見的顏色，我們就得到了梯形

 

 

<div id="test2"></div>
<style>
    #test2{
        width: 50px;
        height: 50px;
        background: transparent;
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
</style>

 CSS實現三角形

三角形同理可得，只要把中間的正方形的寬高設為0就行，如下

 

 

<div id="test3"></div>
<style>
    #test3{
        width: 0;
        height: 0;
        display: inline-block;
        background: transparent;
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
</style>

此外，我們通過設置不同邊框的寬度或者顏色，可以得到不一樣的三角形或者梯形

 

 

       

 

 

 CSS實現平行四邊形

我們既然有了三角形和梯形或者長方形，可以得到平行四邊型呢！！！！

首先，先來兩個三角形，如下

 

 

 再通過CSS3中的transform屬性將兩個三角形移動下位置，就可以實現自己的要求啦。當然你也可以用絕對定位來移動。

 

 

 CSS實現圓形

使用CSS3屬性border-radius可以實現一個圓形。

<div id="circle"></div>
<style>
    #circle{
        width: 100px;
        height: 100px;
        background: blue;
        border-radius: 50px;
    }
</style>

 CSS實現橢圓形

這時候我們就要好好了解下border-radius這個屬性了，border-radius有一個水平半徑和一個垂直半徑

border-radius: 水平半徑 / 垂直半徑;//當然也可以單獨設置某個角的水平半徑和垂直半徑

border-radius: 左上角水平半徑、 右上角水平半徑、 右下角水平半徑、 左下角水平半徑 / 左上角垂直半徑、 右上角垂直半徑、 右下角垂直半徑、 左下角垂直半徑

好了那么我們就可以實現一個橢圓形了

<div id="oval"></div>
<style>
    #oval{
        width: 100px;
        height: 50px;
        background: blue;
        border-radius: 50px / 25px;
    }
</style>

等價於

<div id="oval"></div>
<style>
    #oval{
        width: 100px;
        height: 50px;
        background: blue;
        border-top-left-radius: 50px 25px;
        border-top-right-radius: 50px 25px;
        border-bottom-left-radius: 50px 25px;
        border-bottom-right-radius: 50px 25px;
    }
</style>

 

CSS實現對話框

好了有了之前的三角形、橢圓形，我們就可以形成各種各樣的對話框啦~~~~~~

主要實現原理就是通過兩個三角形的“疊加覆蓋”，來形成對話框的尖角

樣例1：

 

 

CSS”實現對話框效果一

<div class="test1">
    <div class="bot">&nbsp;</div>
    <div class="top">&nbsp;</div>
    CSS實現對話框效果一
</div>
<style>
.test1{width:300px;height: 30px; padding:30px 20px; margin-left:100px; background: #eb7956; position:relative;}
.test1 div{ width:0; height:0; position:absolute;}
.test1 .bot{
    border-width:20px;
    border-style:solid;
    border-color:#ffffff #eb7956 #eb7956 #ffffff;
    left:-40px;
    top:40px;
}
.test1 .top{
    border-width:10px 20px;
    border-style:solid;
    border-color: transparent  #ffffff #ffffff transparent ;
    left:-40px;
    top:60px;
}
</style>

 樣例2：

 

 

CSS實現對話框效果二

 

<div class="test2">
    <div class="bot"></div>
    <div class="top"></div>
    CSS實現對話框效果e二
</div>
<style>
    .test2{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
    .test2 div{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
    .test2 div.bot{
        border-width:20px;
        border-style:solid dashed dashed;
        border-color:#beceeb transparent transparent;
        left:80px;
        bottom:-40px;
    }
    .test2 div.top{
        border-width:20px;
        border-style:solid dashed dashed;
        border-color:#ffffff transparent transparent;
        left:80px;
        bottom:-33px;
    }
</style>

 樣例3

<div class="test3">
    <div class="bot">&nbsp;</div>
    <div class="top">&nbsp;</div>
    CSS實現對話框效果三
</div>
<style>
.test3{
    width:300px;
    height: 30px;
    border-radius: 160px/45px;
    padding:30px 20px;
    margin-left:100px;
    background: #eb7956;
    position:relative;
}
.test3 div{ width:0; height:0; position:absolute;}
.test3 .bot{
    border-width:20px;
    border-style:solid;
    border-color:transparent #eb7956 #eb7956 transparent;
    left:-30px;
    top:40px;
}
.test3 .top{
    border-width:10px 20px;
    border-style:solid;
    border-color: transparent  #ffffff #ffffff transparent ;
    left:-30px;
    top:60px;
}
</style>

此外，IE6下有些bug需要做下兼容

1. IE6的奇偶bug
如果定位外框高度或是寬度為奇數，則IE6下，絕對定位元素的低定位和右定位會有1像素的誤差。所以，盡量保證外框的高度或寬度為偶數值。

2. IE6的空div莫名高度bug
IE6下，空div會有莫名的高度，也就是說height:0;不頂用，此時形成的尖角的實際占高於其他瀏覽器是有差異的。可使用font-size:0; + overflow:hidden;修復此問題。

3. IE6不支持實線邊框透明transparent屬性
IE6不支持實線邊框透明transparent屬性，當某邊框設置為transparent屬性，且有寬度的話，那么透明會以默認的黑色顯示的。解決方法有兩個，一是將需要隱藏的顏色設置為背景色，這樣與透明效果一樣，此法有局限性，在復雜“邊框法”應用下是行不通的；二是可以使用dashed代替solid，可以實現IE6下邊框transparent透明。為什么能夠實現透明？您可以參考默塵的這篇文章Dotted&Dashed終極分析及IE6透明邊框，我說點題外話，其對原因的解釋似乎說的通，但是，是不是如此，我是相當懷疑的，我尚未有時間驗證，這個可以標記一下。

參考：CSS實現氣泡邊框

CSS實現自適應正方形

正方形應該大家都會，那么如何實現自適應的正方形呢？有兩種方法

方法一：使用padding-bottom實現正方形

使用padding-bottom實現正方形

<div id="test7">
    <div class="placeholder">使用padding-bottom實現正方形</div>
</div>
<style>
    #test7{
        width: 400px;
        background: gray;
    }
    .placeholder {
        width: 30%;
        padding-bottom: 30%;/* padding百分比相對父元素寬度計算,用padding去填充height*/
        height: 0;/*避免被內容撐開多余的高度 */
        background: #4acfff;
    }
</style>

方法二：使用css3單位vw

原理同padding，也是利用了vw是相對寬度，不過要注意是相對視窗寬度哦

<div class="vw"></div>
<style>
    .vw {
        width: 50%;
        height: 50vw;
        background: pink;
    }
</style>

補充：css中的單位

• px：絕對單位，頁面按精確像素展示
• em：相對單位，基准點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
• rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持
• vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
• vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
• vmin：vw和vh中較小的那個。
• vmax：vw和vh中較大的那個。
• vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
• %:百分比
• in:寸
• cm:厘米
• mm:毫米
• pt:point，大約1/72寸
• pc:pica，大約6pt，1/6寸
• ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)
• ch:以節點所使用字體中的“0”字符為基准，找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)