如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
自小編上次整理了一些基礎圖形的繪制方法之后，大家都紛紛表示對css3的繪圖技巧學習很有幫助。雖說萬變不離其宗，再復雜的圖形也可以用最簡單的三角形或者圓弧組合出來，但仍有不少朋友反映，學會基本圖形也不懂得怎樣組合，也不知道什么時候用偽元素比較合適。所以今天小編來一篇相對復雜的圖形繪制教程，大家看過之后就會發(fā)現(xiàn)，很多看似復雜的圖形(比如下圖這樣的)，換一下組合方式就會變得簡單很多。
如果你覺得以上圖形無從下手，或者覺得需要用很多個html元素來完成的話，那相信本教程對你的幫助會非常大。
現(xiàn)在我們先來編寫基礎的html代碼:
后面我們只要往里面填充樣式和元素即可測試效果。
我們先來看一個比較簡單的形狀，雞蛋。可別小看它，想當年達芬奇光畫這個雞蛋都練了不知道多少年，所以大家也來學畫蛋吧，以后當上一名CSS3畫家。
上次我們學習了繪制橢圓的方法，乍一看似乎在橢圓基礎上進行修改即可獲得正確的效果。但之所以能繪制出橢圓，其原因在于border-radius使用了百分比，而在一個角里面，x和y的百分比始終相等。
舉個例子，一個矩形的寬度為30px，高度為40px，如果我們讓一個角的圓角半徑等于50%，那么圓角在x方向上的半徑等于15px，y方向上的半徑等于20px，若為40%，則x方向半徑等于12px，y方向半徑等于16px，x和y的比例始終等于矩形的寬高比3:4。所以，你希望x方向上的半徑等于15px，y方向上的半徑等于30px，那用上次的方法是絕對不可能做到的。
對于這個蛋來說，我們不難發(fā)現(xiàn)x方向上的圓角半徑都剛好等于寬度的一半，也就是50%，但是y方向就不一樣了，上面兩個角的半徑明顯大于下面兩個角。假設上面的圓角半徑是60%，那么下面的圓角半徑就是40%了，這樣就可以確保圓角之間沒有直線連接。
那么問題來了，我們要實現(xiàn)的就是左上角的圓角半徑在x方向上等于50%，在y方向上等于60%，又該怎樣實現(xiàn)呢？
這里小編給大家介紹圓角半徑的另一個用法——通過斜杠分開x和y方向的圓角半徑。
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
其中，/前面的部分代表x方向上的4個半徑，順序依次為左上，右上，右下，左下(從左上順時針排下來即可)，自然而然地就會想到/后面的部分就代表y方向上的4個半徑，順序跟x方向的一樣。可見左上和右上的半徑都是60%，而左下和右下則均為40%。
下面給出完整的代碼，HTML部分就一個div
CSS代碼如下:
.egg{
display:block;
width:126px;
height:180px;
background-color:red;
-webkit-border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
-moz-border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
-o-border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}
接下來我們看看下面的這個圖形，非常經典的吃豆豆游戲主角。
學過基本圖形繪制的朋友可能會想到用三角形擦除一個圓形來得到上圖的形狀。嗯，這確實是一個方法，但局限性相當明顯，因為CSS3不存在真正意義上的擦除。所謂的“擦除”，僅僅是用跟背景一樣的顏色進行填充而已，如果背景圖不是透明的話，那這種做法就白搭了。
這里我們換個思路，首先我們知道畫三角形用的是很粗的邊框，然后利用轉角處的交界線生成三角形。
所以第一步，我們先讓整個div的寬高等于0，然后設置很粗的邊框。
HTML代碼:
CSS代碼:
.pacman{
width:0px;
height:0px;
border:60px solid red;
}
效果如下圖所示，顯示出來的是一個正方形，但實際上它沒有寬高，都是邊框在撐著。
根據前面介紹的原理，這個“正方形”其實是4個三角形拼接的結果。
這樣的話，我們自然而然地就想到隱藏掉右側的邊框線，嘗試設置為0。
由于4條邊不對等了，所以我們拆分一下。
.pacman{
width:0px;
height:0px;
border-right:0 solid red;
border-top:60px solid red;
border-left:60px solid red;
border-bottom:60px solid red;
}
運行效果如下圖所示:
由于失去了右邊線的支撐，右側全部被截沒了，看來60px還得保留，但是又不能顯示出來，怎么辦？你可能會想到用跟背景一樣的顏色來模擬隱藏，但更好的方法是設置為transparent(透明)，這樣才會讓圖形適用于所有背景(包括圖片背景)。
.pacman{
width:0px;
height:0px;
border-right:60px solid transparent;
border-top:60px solidred;
border-left:60px solidred;
border-bottom:60px solidred;
}
再次運行，效果就對了:
這時候，貌似把直角換成圓角就能得到正確的效果，我們不妨試試，圓角半徑就等于邊框的粗細。
.pacman{
/*其它樣式代碼省略*/
-webkit-border-radius:60px;
-moz-border-radius:60px;
-o-border-radius:60px;
border-radius:60px;
}
運行效果如下圖所示，果然正確了:
最后我們來看看這個。天哪，數(shù)一數(shù)，12個三角形，偽元素怎么塞都塞不進啊。
CSS3初學者會很容易被復雜的表象所迷惑，這往往是因為制作者在圖形結構分析方面的經驗不足，無法找出多個“元素”之間的內在聯(lián)系進行重組。聽起來好像很玄乎，那么，小編就畫一個“線稿”給大家看一下吧。
哈哈，這樣是不是就恍然大悟了呢？12個角，竟然就是3個旋轉角度不同的正方形重疊所得。這樣的話，總的元素數(shù)量也就3個。加上before和after偽元素的支持，這么“復雜”的圖形也就只需一個HTML元素就能搞定。
正方形每旋轉90度就重合一次，所以3個元素分下來，就是一個元素不旋轉，然后一個旋轉30度，一個旋轉60度。而旋轉可以通過CSS3的transform屬性輕松實現(xiàn)。
HTML代碼如下:
然后用CSS定義基本形狀，它不旋轉:
.burst-12{
background:red;
width:80px;
height:80px;
position:relative;
text-align:center;
}
3個元素需要重疊，因此要設置相對定位。
然后，兩個偽元素的形狀跟burst-12完全一致，不同的只是要絕對定位，所以before和after偽元素可以一起定義。
.burst-12:before,.burst-12:after{
content:"";
position:absolute;
top:0;
left:0;
height:80px;
width:80px;
background:red;
}
最后，我們讓before旋轉30度，after旋轉60度，效果就完成了。
.burst-12:before{
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
}
.burst-12:after{
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-o-transform:rotate(60deg);
}
小編相信，只要用心學習，技術再菜的童鞋也能照著教程把里面的圖形全部繪制出來。然而要是換成其它圖形，我想還是會有人說畫不出來，或者要繞很大一個圈子才能做得到。這也是情理之中的事情，畢竟這當中的技巧沒有一般的規(guī)律可循，更多的是經驗的積累。所以要在實戰(zhàn)用運用自如，除了熟悉一些常用的手法之外，還要多參考成功的案例，從中獲取更多的靈感。
總結
以上是生活随笔為你收集整理的如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 字符串替换：用参数字符数组成员替换字符串
- 下一篇： 动视暴雪利润下降22%，投身移动端能否重