CSS3實現平行四邊形

本文轉載自查看原文 2020-02-17 16:49 830

關鍵部分就一行代碼: transform: skew(-25deg);

由於skew會帶動其中的子元素一起傾斜，我們需要在內容區外面再放一個div，設置相反的度數，抵消掉傾斜效果。效果及代碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>平行四邊形</title>
    <style>
        .skew {
            width: 200px;
            height: 100px;
            background: lightgreen;
            line-height: 100px;
            margin: 0 auto;
            text-align: center;
            transform: skew(-25deg);
        }

        .skew-main {
            transform: skew(25deg);
        }
    </style>

</head>
<body>
　　<div class="skew">
    　　<div class="skew-main">平行四邊形</div>
　　</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3寫平行四邊形 CSS實現平行四邊形 CSS實現平行四邊形布局 css3實現平行四邊形框效果 css平行四邊形與菱形變換 css平行四邊形與菱形變換 CSS3畫菱形和平行四邊形以及立方體 css實現平行四邊形、菱形圖片效果 VISIO 平行四邊形自己動手畫 CSS實現三角形、梯形、平行四邊形、圓形、橢圓形、對話框、自適應正方形