菱形图片

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




    
    
    菱形图片
    


    
![](1.jpg)

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

菱形图片_第1张图片
这是实现效果

裁剪路径方案
使用clip-path属性对图片进行裁剪,使用polygon()多边形函数来指定形状(一系列用逗号分隔的坐标点),完美解决非正方形图片的菱形裁剪问题,还可以做出一些动画。




    
    
    菱形图片
    


    ![](23.jpeg)


菱形图片_第2张图片
长方形图片的裁剪效果
菱形图片_第3张图片
鼠标移上去可以平滑过渡到原来的样子

你可能感兴趣的:(菱形图片)