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/imghw/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/imghw/default1.png"  data-src="1.jpeg"    alt="css平行四邊形與菱形變換" >
</body>
</html>

登入後複製

css平行四邊形與菱形變換

　希望在不遠的將來clip-path這個屬性在各遊覽器得到更好的支援。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7799

Java教學

1644

CakePHP 教程

1402

Laravel 教程

1299

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。