我不希望图像的透明部分可点击。
我发现<map>但坐标以像素为单位,我想做一些响应式的事情。另一个问题:我找不到为什么第一张图片的底部和第二张图片的顶部之间有一些像素。
https://jsfiddle.net/tsfxy84u/
.container {
width: 90%;
margin: 0 auto;
overflow: auto;
}
.left {
float: left;
}
.right {
float: right;
}
.resize {
width: 50%;
}
img {
width: 50%;
}
.two {
-webkit-clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
}
.one {
-webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}Run Code Online (Sandbox Code Playgroud)
<section class="container">
<a …Run Code Online (Sandbox Code Playgroud)