HTML显示梯形图片代码实例

17-11-09 来源：[db:作者]

收藏我要投稿

HTML显示梯形图片代码实例

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
        <title>skew test</title>
        <style type="text/css">
            html,
            body,
            div,
            img {
                margin: 0;
                padding: 0;
            }

            img {
                border: 0 none;
            }
            .p1 {
                width: 1000px;
                height: 400px;
                padding-left: 0px;
                margin-left: 180px;
                float: left;
                transform: skew(-20deg, 0deg);
                overflow: hidden;
            }

            .p2 {
                width: 500px;
                height: 400px;
                margin-left: -168px;
                background-color: royalblue;
                transform: skew(40deg, 0deg);
                overflow: hidden;
            }

            .p2 img {
                transform: skew(-23deg, 0deg);
            }
        </style>
    </head>
    <body>
        <div class="p1">
            <div class="p2">
                <img width="150%" src="p.jpg"/>
            </div>
        </div>
    </body>
</html>

主要原理是通过将两个div倾斜在最里面的div放上图片，调整图片的位置，溢出部分不显示。

点击复制链接与好友分享!回本站首页