前言：最近準備做一個自己的網頁，設計稿中導航我準備設計成矩形，也有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 */<p class="sanjiao"></p>登入後複製
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還有另外幾個特性，用的好，做出來的特效逼格還是挺高的
/* 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）聊天框
<span style="color: #000000">/* CSS */<br/> .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;
} <br/>/* HTML */<br/><p class="chatBox"></p> </span>登入後複製
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 */<p class="bagua"></p>登入後複製
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 */<p class="zhuanshi"></p>登入後複製
CSS3裡還有很多話圖形的方法方式，需要你慢慢去研究，雖然很少用到，但無聊時，拿來畫畫，還是挺有趣的.
以上是CSS3新特性繪製常見圖形方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
