html - 带角度边框的 IMG 尺寸
问题描述
我想让 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: '';
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>
解决方案
您的代码绝对没问题,只需在样式化之后删除逗号(,
),之后.right:before
一切都会正常工作。不要改变你的 CSS。
.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>
推荐阅读
- javascript - Nodejs 的内容管理系统
- html - 可以用于标记以制作标题和副标题的容器?
- apache - Apache:最小请求量的属性
- ios - 我如何处理对单个按钮的多次单击操作以进行 api 调用并从 api 获得真实响应
- vba - Visio 使用 VBA 更改形状数据/属性
- spring - 如何最小化和加速开发环境的 Spring Boot 项目?
- php - Laravel - 带有“子”视图的路线
- python - ipywidgets:确定正在观察哪个小部件
- eclipse - BIRT (Eclipse BIRT) - 运行时和设计器版本中的日期格式不同
- java - 进行查询以检索每个大陆 Firebase 实时数据库的国家/地区