css平行四邊形與菱形變換-css教學-PHP中文網

首頁

web前端

css教學

css平行四邊形與菱形變換

高洛峰

Nov 30, 2016 pm 04:01 PM

css

*以下技巧皆源自於Lea Verou所著《CSS Secrets》

平行四邊形

　　平行四邊形的構造可以基於矩形透過skew()的變形屬性進行斜向拉升得到（skew所用的座標系，縱向是X軸，橫向是Y軸，與常見的座標系相反）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             color: white;
             background-color: #51bfff;
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             transform: skewX(-45deg);
         }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

css平行四邊形與菱形變換

　但是內容傾斜可能不是我們所需要的效果，一種常規的解決方案就是在內層嵌套一個div，然後加上一個反方向的拉升transform: skewX(45deg);但是有代碼潔癖的人表示接受不能。

　　另一種思路是將所有樣式應用到偽元素上。然後再對偽元素進行變形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             color: white;
         }
        .button:before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            background-color: #51bfff;
            transform: skewX(-45deg);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

css平行四邊形與菱形變換

　　這樣不但解決了內容傾斜的問題，而且html結構還是和之前一樣乾淨。不過要注意偽元素生成的圖案是重疊在內容之上的，一旦為它設定背景，就會遮住內容，所以要加上z-index: -1。

菱形圖片

　　如果是在正方形的基礎之上，菱形就是正方形圖案旋轉45度的圖形。我們很容易想到將外層div旋轉45度再將內層img反向旋轉45度。得到如下的圖案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .picture{
             width: 600px;
             transform: rotate(45deg);
             overflow: hidden;
         }
        .picture>img{
            max-width: 100%;
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="location picture"><img  src="/static/imghwm/default1.png"  data-src="1.jpeg"  class="lazy"   alt="css平行四邊形與菱形變換" ></div>
</body>
</html>

css平行四邊形與菱形變換

　　是個挺漂亮的正八邊形呢，如果你能說服產品經理，那工作也算完成啦。好吧，我猜你不能說服。。。

　　這裡由於旋轉方向不一致，外層div截取了超出的部分（注意overflow:hidden），然後一部分又空出來了。只要填滿空出的部分就是菱形啦，這裡你可以畫個草圖用勾股定理算一算。

　　算出的結果是放大1.42倍填充完全。我們在img的transform屬性改為transform: rotate(45deg) scale(1.42);得到下圖：

css平行四邊形與菱形變換

　這個構造菱形的方案有一個缺陷，就是當原圖不是正方形就需要使用更大的放大係數，截取的圖片內容就更有限了。

　　而且方案本身也不算簡潔優雅。這裡向大家介紹一個屬性clip-path（遺憾的是支持性似乎並不好），它可以透過傳入固定的位置點將圖片裁剪成任意的多邊形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
        .picture{
            -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            -moz-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            transition: 1s clip-path;
        }

    </style>
</head>
<body>
<img  class="location picture lazy"  src="/static/imghwm/default1.png"  data-src="1.jpeg"    alt="css平行四邊形與菱形變換" >
</body>
</html>

css平行四邊形與菱形變換