小编Bra*_*Box的帖子

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: ''; …
Run Code Online (Sandbox Code Playgroud)

html css css3

5
推荐指数
1
解决办法
70
查看次数

标签 统计

css ×1

css3 ×1

html ×1