我希望用一个斜角边框将两张图片分开。我已经成功地给第一张图片设置了大小。但我尝试对第二张图片进行设置,迄今为止什么也没有效果。
我的工作如下:
即使我试图单独设置它,第二张图像也没有得到斜角边框。
背景如下所示,我想让图像匹配这个角度。
![](https://i.imgur.com/YUNSXAn.png)
![](https://i.imgur.com/4I2lt5h.png)
.left,
.right {
background: #000;
position: relative;
height: 100px;
width: 45%;
float: left;
margin-top: 10px;
opacity: 10%;
}
.right,
.right img {
margin-left: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.left,
.left img {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #fff;
border-left: 30px solid transparent;
border-right: 0px solid #fff;
position: absolute;
top: -50px;
right: 0;
}
.right:before,
{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 100px solid #fff;
border-bottom: 50px solid transparent;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: 0;
left: 0;
}
.left img,
.right img {
position: relative;
width: 100%;
height: 100%;
opacity: 0.5;
}
.left img:hover,
.right img:hover {
opacity: 1;
cursor: pointer;
}
<div class="left"><img src="./img/chu.jpg"></div>
<div class="right"><img src="./img/chu.jpg"></div>