css3寫平行四邊形

本文轉載自查看原文 2019-10-10 09:18 361 HTML與css3

<html>

    <head>
        <meta charset="UTF-8">
        <title>平行四邊形</title>
        <style type="text/css">
           
            .skew {
                width: 100px;
                height: 73px;
                background: #f0eb4f;
                margin: 0 auto;
                text-align: center;
                transform: skew(15deg);
                box-shadow: 2px 3px 5px #a7a0a0;
            }
            
            .skew-main {
                transform: skew(-15deg);
            }
        </style>
    </head>

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

</html>

結果如圖所示：

免責聲明！

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

猜您在找 CSS3實現平行四邊形 CSS實現平行四邊形 css平行四邊形與菱形變換 css平行四邊形與菱形變換 CSS實現平行四邊形布局 CSS3畫菱形和平行四邊形以及立方體 css3實現平行四邊形框效果 VISIO 平行四邊形自己動手畫 css實現平行四邊形、菱形圖片效果求平行四邊形的第四個點的坐標