css實現梯形（各種形狀）的網頁布局——transform的妙用
在各式各樣的網頁中，經常會看到形狀特別的布局，比如說下面的這種排版方式：
這種視覺上的效果，體驗十分好。那麽他是如何來實現的呢，博主在這裏整理了如下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>
接下來，打開瀏覽器，看看他是個什麽樣子。
吆喝！原來是這個樣子的啊，那接下來，相信大家就明白了吧，只要在父div上加overflow: hidden;,隱藏掉我們不想讓他顯示的部分。一個簡易的多形狀布局就出現了，那麽接下來我們就具體實現以下，然後看看效果.
以下就是隱藏多余部分的效果
如何？效果還不錯吧，這是最簡單的多圖形布局方式，但這種無法實現復雜的效果，而且只有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老大哥這種無法設置的就算了，
文章若有疏忽之處，還請大家指出，在這裏也誠心邀請大家共同學習，廣泛的提意見。如果朋友們有更好的實現多形狀布局的方法，請消息我，
讓我們共同學習。
css實現梯形（各種形狀）的網頁布局——transform的妙用