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平行四邊形與菱形變換

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

陳述

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

光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM

具有CSS的自定義光標很棒，但是我們可以將JavaScript提升到一個新的水平。使用JavaScript，我們可以在光標狀態之間過渡，將動態文本放置在光標中，應用複雜的動畫並應用過濾器。

世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM

互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球，但CSS的靈活性和力量的增加，可以懷疑Lee＆Aver Lee有一天會成為一種

使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM

有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器，並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。

微笑嗎？Apr 23, 2025 am 09:57 AM

好吧，事實證明，SVG的內置動畫功能從未按計劃進行棄用。當然，CSS和JavaScript具有承載負載的能力，但是很高興知道Smil並沒有像以前那樣死在水中

'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，讓＃039;跳上文字包裝：Safari Technology Preview In Pretty Landing！但是請注意，它與在鉻瀏覽器中的工作方式不同。

CSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重點介紹了年鑑，最近的播客出現，新的CSS計數器指南以及增加了幾位新作者，這些新作者貢獻了有價值的內容。

tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM

在大多數情況下，人們展示了@Apply的@Apply功能，其中包括Tailwind的單個property實用程序之一（會改變單個CSS聲明）。當以這種方式展示時，@Apply聽起來似乎很有希望。如此明顯

感覺就像我沒有釋放：走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一樣部署的部署歸結為您部署的工具與降低複雜性與添加的複雜性之間的獎勵之間的不匹配。

See all articles

熱AI工具

熱工具

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中