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>
接下来,打开浏览器,看看他是个什么样子。
![](https://images2015.cnblogs.com/blog/1113254/201705/1113254-20170530074621961-1526125409.png)
以下就是隐藏多余部分的效果
如何?效果还不错吧,这是最简单的多图形布局方式,但这种无法实现复杂的效果,而且只有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老大哥这种无法设置的就算了,
文章若有疏忽之处,还请大家指出,在这里也诚心邀请大家共同学习,广泛的提意见。如果朋友们有更好的实现多形状布局的方法,请消息我,
让我们共同学习。