菱形图片

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

菱形图片
11、菱形图片
ios做个菱形的Button？
菱形肌
矿用菱形网@黑龙江矿用菱形网@矿用菱形网厂家
矿用菱形网@邯郸矿用菱形网@矿用菱形网厂家
PhotoShop实战（一）：图片切割为菱形
2019-04-13
chapter-4-练习题-应用for循环打印菱形
菱形

在网页中呈现菱形效果有两种方法
基于变形的方案
使用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>