在各式各樣的網頁中,經常會看到形狀特別的布局,比如說下面的這種排版方式:
這種視覺上的效果,體驗十分好。那么他是如何來實現的呢,博主在這里整理了如下2種實現的方式。
1.通過給 div 加border的方式實現各種圖形。你可以點擊 “點我啊” 查看博主的博客,了解這種方式。
2.通過 transform 修改盒子樣式,相互覆蓋達到效果
以上的兩種方式都可以實現,但是博主認為第二種復雜一些,但是實現的效果更好一些。接下來,我們就具體講解
一下transform實現網頁多圖形布局的要點。
按照慣例,先看一段代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 800px; height: 500px; margin: 400px auto; background-color: fuchsia; /*overflow: hidden;*/ } .left{ width: 800px; height: 500px; background-color: yellow; transform: skewY(-45deg); } </style> </head> <body> <div class="parent"> <div class="left"></div> <!--<div class="right"></div>--> </div> </body> </html>
接下來,打開瀏覽器,看看他是個什么樣子。

以下就是隱藏多余部分的效果
如何?效果還不錯吧,這是最簡單的多圖形布局方式,但這種無法實現復雜的效果,而且只有2個div,具體效果顯示,還得
通過定位實現,那接下來,我們再做一個復雜點的。注意,稍微復雜之后,出現了許多需要注意的地方,朋友們要仔細看了。同樣
我們先看一段代碼。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 800px; height: 500px; margin: 600px auto; background-color: fuchsia; /*overflow: hidden;*/ } .left{ width: 600px; height: 500px; background-color: yellow; transform: skewY(-45deg) translate(0px,-400px); } .right{ width: 600px; height: 500px; background-color: #00FFFF; transform: skewY(-45deg) translate(200px,120px); } </style> </head> <body> <div class="parent"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
再看下效果圖:
代碼很簡單,但是有幾點要注意的地方:
1. 首先,內層的2個div,因為旋轉的原因,所占的空間已經不在是 四四方方的規矩形狀了,所以調節位置的時候需要注意
特別是div再增加的時候,會因為多個div所占區域沖突,而覆蓋擠壓。所以,調節位置時需要有耐心。
2.要避免其他元素浮動和定位對我們布局造成的影響,用此方法盡量在同一層中不要讓元素浮動、定位等操作。
3.skewY(-45deg);正數為逆時針轉,反之,順時針轉。除了deg還有其他單位,做別的旋轉,這里博主就不一一贅述了。
看到這里,相信朋友們已經了解了多形狀布局了。但這僅僅是開始,接下來還要在布局當中添加內容。那么我們繼續看下面代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 800px; height: 500px; margin: 600px auto; background-color: fuchsia; /*overflow: hidden;*/ } .left{ width: 600px; height: 500px; background-color: yellow; transform: skewY(-45deg) translate(0px,-400px); } .left img{ width: 100%; } .right{ width: 600px; height: 500px; background-color: #00FFFF; transform: skewY(-45deg) translate(200px,120px); } </style> </head> <body> <div class="parent"> <div class="left"> <img src="img/QQ圖片20170223091455.jpg"/> </div> <div class="right"> <p>看看我變成什么德行了</p> </div> </div> </body> </html>
然后看看效果:
我的天吶,怎么是醬紫的呢!好吧,在css中,父元素如果添加了transform屬性,子元素會繼承這些屬性,做相同的變化,
那我們該如何去消除它,得到我們想要的效果呢。很簡單,只要在 對應的子元素添加與父元素相反的transform樣式,就可以了。
那我們實驗一下。看如下代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ width: 800px; height: 500px; margin: 600px auto; background-color: fuchsia; overflow: hidden; } .left{ width: 600px; height: 500px; background-color: yellow; transform: skewY(-45deg) translate(0px,-400px); overflow: hidden; } .left img{ width: 100%; transform: skewY(45deg) translate(0px,400px); } p{ transform: skewY(45deg) translate(310px,0px); } .right{ width: 600px; height: 500px; background-color: #00FFFF; transform: skewY(-45deg) translate(200px,120px); overflow: hidden; } </style> </head> <body> <div class="parent"> <div class="left"> <img src="img/QQ圖片20170223091455.jpg"/> </div> <div class="right"> <p>看看我變成什么德行了</p> </div> </div> </body> </html>
效果圖如下:
看到這,我們想要的效果就已經出來,但是有幾點還是得說明一下的:
1.我們通過覆蓋(也就是再寫了一遍css樣式)的方法更改了子元素繼承的屬性,簡單但是有些特殊情況還是修改繼承屬性比較正統。
2.我們需要修改的屬性大多是旋轉,可以直接反過來。位置平移之類的,還是要具體調節,不是說只喲反過來就可以實現一切
3.建議朋友們,調試的時候不要加hidden樣式,避免自己都找不到元素的位置
然后聊聊這個方法的一些不足之處:
1.通過transform屬性修改的,會受到動畫設置效果的影響。
2.不太適合實現子模塊動態移動的動畫效果,畢竟一移動,隱藏的部分會顯露出來。
3.響應式比較麻煩,因為transform只能調像素,無法自適應各種分辨率,建議朋友們在不同設備上定死寬度,同時設置用戶無法縮放
當然,像我們IE老大哥這種無法設置的就算了,
文章若有疏忽之處,還請大家指出,在這里也誠心邀請大家共同學習,廣泛的提意見。如果朋友們有更好的實現多形狀布局的方法,請消息我,
讓我們共同學習。