CSS3新特性,繪制常見圖形

前言：最近准備做一個自己的網頁，設計稿中導航我准備設計成矩形，也有hover樣式展示的矩形，當中一些頭像等等。以前除了畫圓，好像真沒認真畫過其他圖形，今天就畫畫我們常見到的幾個圖形。

在此之前我們有必要了解下什么是偽元素(和它不同的，還有一個概念叫偽類，兩者容易混淆)，沒有它畫不成圖形的。

a）偽元素：用來在內容元素的前后插入額外的元素，之所以叫偽元素，就是它們根本就不在文檔中生成，只能在外部可見，比如：你F12時，在右邊代碼框中是不是可以看到？

這里用到的兩個偽元素  ①元素之前:before  ②元素之后:after

1）圓，沒必要了，我們看看三角形

/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*這里的100px 就是三角形在豎直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 還可以寫不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */
<div class="sanjiao"></div>

2）圓柱

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 這個層疊順序要設置下 不然看到的圓柱頂部不美觀 看着就不想圓柱了 */
    }

.yuanzhu:before {
　　　　position: absolute;
　　　　top: -10px;
　　　　content: "";
　　　　width: 50px;
　　　　height: 20px;
　　　　border-radius: 50%;
　　　　background: #A8A8A8;
　　　　z-index: 99
　　}

.yuanzhu:after {
　　　　position: absolute;
　　　　bottom: -10px;
　　　　content: "";
　　　　width: 50px;
　　　　height: 20px;
　　　　border-radius: 50%;
　　　　background: #5E5E5E;
　　　　z-index: 9
　　}

/* HTML */
<div class="yuanzhu"></div>

3）五角星

畫五角星，我們要先知道瀏覽器幾個私有前綴后跟的樣式中"deg"表示的是旋轉角度,比如“45deg”表示的就是順時針旋轉45度，負的就表示逆時針。

rotate了是transform的其中一個屬性，表示2D旋轉，也就是二維旋轉，它也有三維旋轉，transform還有另外幾個特性，可以去看看http://www.w3school.com.cn/cssref/pr_transform.asp 它的幾個特性，用的好，做出來的特效 逼格還是挺高的

/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
　　　　　-ms-transform: rotate(35deg);/* IE 9 */
　　　　　-o-transform: rotate(35deg); /* Opera */
　　}

　　.wujiaox:after {
　　　　　　content: "";
　　　　　　width: 0px;
　　　　　　height: 0px;
　　　　　　display: block;
　　　　　　border-right: 100px solid transparent;
　　　　　　border-bottom: 70px solid #5E5E5E;
　　　　　　border-left: 100px solid transparent;
　　　　　　position: absolute;
　　　　　　top: 3px;
　　　　　　left: -105px;
　　　　　　-webkit-transform: rotate(-70deg);
　　　　　　-moz-transform: rotate(-70deg);
　　　　　　-ms-transform: rotate(-70deg);
　　　　　　-o-transform: rotate(-70deg);
　　　}

　　.wujiaox:before {
　　　　　　content: "";
　　　　　　width: 0;
　　　　　　height: 0;
　　　　　　border-bottom: 80px solid #5E5E5E;
　　　　　　border-left: 30px solid transparent;
　　　　　　border-right: 30px solid transparent;
　　　　　　position: absolute;
　　　　　　top: -45px;
　　　　　　left: -65px;
　　　　　　-webkit-transform: rotate(-35deg);
　　　　　　-moz-transform: rotate(-35deg);/* 逆時針旋轉35度 */
　　　　　　-ms-transform: rotate(-35deg);
　　　　　　-o-transform: rotate(-35deg);
　　　　}

/* HTML */
<div class="wujiaox"></div>

畫五角星時，要注意，一定要設置一個content:""; 不然你是看不到偽類元素所表現出的樣式的；兩個偽類元素都要設置為絕對定位，父元素設置相對.

4）聊天框

/* CSS */
　　　　　　.chatBox {
                width: 200px;
                height: 50px;
                margin: 30px auto;
                background: #5E5E5E;
                border-radius: 5px;
                position: relative;
            }
            
            .chatBox:before {
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 100%;
                top: 15px;
                border-top: 8px solid transparent;
                border-right: 10px solid #5E5E5E;
                border-bottom: 8px solid transparent;
            }
            
/* HTML */
<div class="chatBox"></div> 

5）八卦圖，其實就是一個大半圓+兩個小圓構成的

/* CSS */
　　　　　　.bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }
            
            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }
            
            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */
<div class="bagua"></div>

6）“磚石”圖形

首先畫一個直角梯形，再通過偽類元素在其下方畫一個三角形

/* CSS */
　　　　　　.zhuanshi {
                width: 50px;
                height: 0;
                border-style: solid;
                margin: 30px auto;
                border-width: 0 25px 25px 25px;
                position: relative;
                border-color: transparent transparent #5E5E5E transparent;
            }
            
            .zhuanshi:after {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 70px 50px 0 50px;
                border-color: #5E5E5E transparent transparent transparent;
                position: absolute;
                top: 25px;
                left: -25px;
            }

/* HTML */
<div class="zhuanshi"></div>

 

 

CSS3里還有很多話圖形的方法方式，需要你慢慢去研究，雖然很少用到，但無聊時，拿來畫畫，還是挺有趣的.

 

交流群 : 192713488