美文网首页
菱形图片

菱形图片

作者: _菡曳_ | 来源:发表于2017-07-27 20:50 被阅读0次

    在网页中呈现菱形效果有两种方法
    基于变形的方案
    使用div将图片包裹起来,然后对其应用相反的rotate()变形样式

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>菱形图片</title>
        <style type="text/css" media="screen">
            .photo{
                margin: 5% auto;
                width: 150px;
                transform: rotate(45deg);
                overflow: hidden;
            }
            .photo > img{
                max-width: 100%;
                transform: rotate(-45deg) scale(1.42);
            }
        </style>
    </head>
    <body>
        <div class="photo">
            ![](1.jpg)
        </div>
    </body>
    </html>
    

    max-width:100%这条声明会被解析为容器的边长,但是我们需要的是图片宽度与容器对角线相等,所以约为1.42倍。如果使用scale()变样式来把这个图片放大会更合理:1)希望图片尺寸属性保留100%这个值,当浏览器不支持变形样式时仍然可以得到合理的布局
    2)通过scale()变形样式来缩放图片是以它的中心点进行缩放的;通过width属性来放大图片时,只会以它的左上角为原点进行缩放,从而迫使我们动用额外的负外边距来把图片的位置调整回来。

    这是实现效果
    裁剪路径方案
    使用clip-path属性对图片进行裁剪,使用polygon()多边形函数来指定形状(一系列用逗号分隔的坐标点),完美解决非正方形图片的菱形裁剪问题,还可以做出一些动画。
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>菱形图片</title>
        <style type="text/css" media="screen">
            img{
                width: 30%;
                clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
                transition: 1s clip-path;
            }
            img:hover{
                clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
            }
        </style>
    </head>
    <body>
        ![](23.jpeg)
    </body>
    </html>
    
    长方形图片的裁剪效果 鼠标移上去可以平滑过渡到原来的样子

    相关文章

      网友评论

          本文标题:菱形图片

          本文链接:https://www.haomeiwen.com/subject/yxktlxtx.html