我想用一个有角度的边框分开2 img.我第一次设法调整大小.我尝试了第二次,但到目前为止我没有任何作用.到目前为止我的工作:
第二个img没有得到有角度的边框,即使我尝试将它分开制作背景看起来像这样,我希望图像与角度相匹配.
.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: ''; …Run Code Online (Sandbox Code Playgroud)