在各式各樣的網頁中，經常會看到形狀特别的布局，比如說下面的這種排版方式：
這種視覺上的效果，體驗十分好。那麼他是如何來實作的呢，部落客在這裡整理了如下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老大哥這種無法設定的就算了，
文章若有疏忽之處，還請大家指出，在這裡也誠心邀請大家共同學習，廣泛的提意見。如果朋友們有更好的實作多形狀布局的方法，請消息我，
讓我們共同學習。