菱形图片
2017-07-27 本文已影响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">
</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>
</body>
</html>
长方形图片的裁剪效果
鼠标移上去可以平滑过渡到原来的样子
