我正在寻找一种解决方案(js,css),以在图像上创建折角。跨浏览器的支持会很棒。
body {
background: #f7f7f7;
}
.img-cont {
position: relative;
display: inline-block;
}
img {
clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 100%, 0 0);
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.15);
display: block;
height: auto;
}
.img-cont::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
border: 10px white solid;
border-bottom-color: transparent;
border-left-color: transparent;
box-shadow: 4px -4px 5px rgba(0, 0, 0, 0.15);
transform: rotate(-90deg);
z-index: 2;
}
<div class="img-cont">
<img src="https://placeimg.com/640/640/any?t=1579077274644" width="400" />
</div>
很遗憾,IE不支持它,但是最大的问题是图像周围的阴影不可见。
https://jsfiddle.net/3548yhnx/
任何其他想法都很棒!
就知道了。我必须将阴影添加到父对象:
body {
background: #f7f7f7;
}
.img-cont {
position: relative;
display: inline-block;
filter: drop-shadow(-5px 5px 10px rgba(0,0,0,.2));
}
img {
clip-path: polygon(0 0, 100% 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 100%, 0 0);
display: block;
height: auto;
}
.img-cont::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
border: 10px white solid;
border-bottom-color: transparent;
border-left-color: transparent;
box-shadow: 4px -4px 5px rgba(0, 0, 0, 0.15);
transform: rotate(-90deg);
z-index: 2;
}
<div class="img-cont">
<img src="https://placeimg.com/640/640/any?t=1579077274644" width="400" />
</div>