css实现梯形（各类形状）的网页布局——transform的妙用

时间 2019-11-17

标签 css 实现梯形各类形状网页布局 transform 妙用栏目 CSS 繁體版

原文原文链接

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

　　这种视觉上的效果，体验十分好。那么他是如何来实现的呢，博主在这里整理了以下2种实现的方式。html

　　　　1.经过给 div 加border的方式实现各类图形。你能够点击 “点我啊” 查看博主的博客，了解这种方式。浏览器

　　　　2.经过 transform 修改盒子样式，相互覆盖达到效果布局

　　以上的两种方式均可以实现，可是博主认为第二种复杂一些，可是实现的效果更好一些。接下来，咱们就具体讲解学习

一下transform实现网页多图形布局的要点。flex

　　按照惯例，先看一段代码：动画

<!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>

　　接下来，打开浏览器，看看他是个什么样子。spa

　　吆喝！原来是这个样子的啊，那接下来，相信你们就明白了吧，只要在父div上加overflow: hidden;,隐藏掉咱们不想让他显示的部分。一个简易的多形状布局就出现了，那么接下来咱们就具体实现如下，而后看看效果.

　　如下就是隐藏多余部分的效果3d

　　如何？效果还不错吧，这是最简单的多图形布局方式，但这种没法实现复杂的效果，并且只有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老大哥这种没法设置的就算了，

　　文章如有疏忽之处，还请你们指出，在这里也诚心邀请你们共同窗习，普遍的提意见。若是朋友们有更好的实现多形状布局的方法，请消息我，

让咱们共同窗习。