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>