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

　　这种视觉上的效果，体验十分好。那么他是如何来实现的呢，博主在这里整理了如下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. gulp 学习笔记

    以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录   npm     查看模块     安装模块      ...

  2. 基础：获得servletAPI

    package com.learning.web.action; import javax.servlet.ServletContext; import javax.servlet.http.Http ...

  3. jquery-ul-li实现分页功能 转载仅供交流

    js文件代码: (function($){ $.fn.Pages = function(options){ var opts = $.extend({},$.fn.Pages.defaults, op ...

  4. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  5. php面向对象（一）---2017-04-17

    重点:定义类与实例化类:访问修饰符:构造函数 一.面向对象 面向对于与面向过程的主要区别在于:前者包含类和对象的概念 二.类和对象   1.类是由众多对象抽象(归纳总结)出来的东西  代表所有对象的特 ...

  6. idea 集成sonarLint

    1.目标 idea集成sonar的代码检查,实现可以在提交代码前就检查你的代码,而不是将代码提交之后,之后再去检查. Sonar可以从以下七个维度检测代码质量,而作为开发人员至少需要处理前5种代码质量 ...

  7. iptables配置详解

    iptables主要参数 -A 向规则链中添加一条规则,默认被添加到末尾 -T指定要操作的表,默认是filter -D从规则链中删除规则,可以指定序号或者匹配的规则来删除 -R进行规则替换 -I插入一 ...

  8. 学习vue 20天，我写了点东西

    往昔 最初团队里使用Angularjs进行开发,刚开始还好,到了项目后期越发感觉Angularjs太重了,以至于后来重构项目时,毅然放弃Angularjs,投入了Vue的怀抱.除了组建团队时,是我搭建 ...

  9. android 4.4.3 css hack 写法

    最近发现android在4.4.3上面出现很多怪异的现象,现在虽然没有找到原因和解决方案,但是突然间找到一个css hack写法: button{ display:none; width:$rem*4 ...

  10. HDFS中NameNode启动过程

    移动到hadoop文件目录下 NameNode启动命令:sbin/hadoop-daemon.sh start namenode DataNode启动命令:sbin/hadoop-daemon.sh ...