制作菱形图片遮罩

方法一

使用box-shadow制作菱形遮罩

需要在原有结构内增加一个shaow遮罩层

HTML

1
2
3
4
<div class="img">
<img src="https://picsum.photos/300/300">
<div class="shadow"></div>
</div>

外层div设置相对定位position: relative;
将shadow层旋转45度,并设置阴影;
box-shadow中的值分别是:
box-shadow:水平位移 垂直位移 阴影宽度 模糊程度 颜色
这里水平和垂直位移这只为0,即从中间开始向四周出现阴影。 阴影宽度一定要宽于外框,模糊程度可以填0,即不模糊,颜色填白色。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.img {
width: 300px;
height: 300px;
position: relative;
margin: 100px auto;
overflow: hidden;
}

.shadow {
width: 200px;
height: 200px;
box-shadow: 0px 0px 0px 200px #fff;
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
border-radius: 10px;
}

效果

方法二

使用两次旋转达到菱形效果

HTML

1
2
3
<div class="img">
<img src="https://picsum.photos/300/300">
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.img {
position: relative;
width:200px;
height: 200px;
margin: 50px auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 10px;
overflow: hidden;
}
.img img {
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

效果

坚持原创技术分享,您的支持将鼓励我继续创作!
0%