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>
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老大哥这种无法设置的就算了，
文章若有疏忽之处，还请大家指出，在这里也诚心邀请大家共同学习，广泛的提意见。如果朋友们有更好的实现多形状布局的方法，请消息我，
让我们共同学习。