在各式各样的网页中，经常会看到形状特别的布局，比如说下面的这种排版方式：

　　这种视觉上的效果，体验十分好。那么他是如何来实现的呢，博主在这里整理了如下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的妙用的更多相关文章

  1. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  2. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  3. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  4. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  5. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  6. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  7. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  8. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  9. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

随机推荐

  1. 如何在Windows系统下安装Linux虚拟机

    先安装虚拟机这个软件,然后在虚拟机里装linux. 1,准备,下载VM虚拟机,链接: http://pan.baidu.com/s/1z79oU 密码: vbap.和linux镜像文件,可以下载ubu ...

  2. jquery 中 eq()遍历方法 和:eq()选择器的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. okHttp基础用法

    获取okHttp..jar.包 1.联网获取jar包 2.本地添加 okHttp的使用 get请求 1.创建okHttpClient对象new OkHttpClient(); 2.创建一个请求对象Re ...

  4. SqlDataReader生成动态Lambda表达式

    上一扁使用动态lambda表达式来将DataTable转换成实体,比直接用反射快了不少.主要是首行转换的时候动态生成了委托. 后面的转换都是直接调用委托,省去了多次用反射带来的性能损失. 今天在对Sq ...

  5. php生成器使用总结

    一般我们在迭代一组数据的时候,需要创建一个数据,如果数组很大,则会消耗很大性能,甚至造成内存不足抛出error比如: //Fatal error: Allowed memory size of 134 ...

  6. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  7. mapTask并行度优化及源码分析

    mapTask并行度的决定机制 一个job的map阶段并行度由客户端在提交job时决定,而客户端对map阶段并行度的规划的基本逻辑为:将待处理数据执行逻辑切片(即按照一个特定切片大小,将待处理数据划分 ...

  8. 搜索结果Refinement 行为总结之 multi-selection refinement

    几乎所有的购物网站的搜索结果页面都会提供refinement (filtering) 给用户去过滤产品,以便能更快找到自己想要的产品.(做的都是国外的项目,不太清楚这个功能地道的中文名是什么.所以就暂 ...

  9. 数据可视化之MarkPoint

    MarkPoint是什么效果?如上图,一闪一闪亮晶晶的效果,这是在Echarts中对应的效果.我最早看到的是腾讯的一个Flash的版本,显示当前QQ在线人数的全国分布效果,感觉效果很炫,当时也在想,怎 ...

  10. app测试特点

    一.安装与卸载1.软件安装后是否可以正常运行:2.安装过程中是否可以中断3.安装空间不足时是否有相应的提示4.是否可以卸载应用(桌面卸载和应用卸载)二.权限测试1.扣费风险:包括发送短信.拨打电话.连 ...