相邻的div角度的边界？ [重复] 相邻的div角度的边界？ [重复](Adjacent di

这个问题已经在这里有一个答案：

• 有倾斜侧面形状（响应） 3个回答

我想创造出向左浮动对方两个div，但是有倾斜角度的边界将它们分离。 我已经附上图片展示了我的意思。

有谁知道，如果这样的事情是可能的CSS（切断与溢出的内容：隐藏我猜）

这些div需要包含获得由边界切断图像，下面是一个例子：

Answer 1:

试试这个

 .left, .right { position: relative; height: 100px; width: 200px; background: #000; float: left; } .left:after { content: ''; line-height: 0; font-size: 0; width: 0; height: 0; border-top: 100px solid #000; border-bottom: 50px solid transparent; border-left: 0px solid transparent; border-right: 50px solid transparent; position: absolute; top: 0; right: -50px; } .right { margin-left: 60px; width: 100px; } .right:before { content: ''; line-height: 0; font-size: 0; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 100px solid #000; border-left: 50px solid transparent; border-right: 0px solid #000; position: absolute; top: -50px; left: -50px; } 

 <div class="left"> </div> <div class="right"> </div> 

---

更新与图片

 .left, .right { background: #000 url('http://lorempixel.com/300/100'); position: relative; height: 100px; width: 250px; float: left; } .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: 0 solid #fff; position: absolute; top: -50px; right: 0; } .right { background: #000 url('http://lorempixel.com/200/100'); width: 150px; } .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; } 

 <div class="left"> </div> <div class="right"> </div> 

Answer 2:

所有的解决方案至今取决于有一个很厚的有角度的边界划分的照片。

为了避免这种情况，你会成为一个容器和扭曲它。 然后计数器歪斜在相反的方向上的图像。

这里有一个CodePen http://cdpn.io/azvsA ，但它的要点如下：

.container {
  border-right: 10px solid white;
  overflow: hidden;
  transform (skewX(-20deg));
}

.image {
  transform (skewX(20deg));
}

Answer 3:

你可以这样写：

.left, .right {
    background: #000 url('http://lorempixel.com/300/100');
    position: relative;
    height: 100px;
    width: 250px;
    float: left;
}
.left{
    z-index:1;
}
.parent{
    overflow:hidden;
}

.right {
    background: #000 url('http://lorempixel.com/200/100');
    width: 150px;
}
.left:after{
    content:'';
    position:absolute;
    border-right:20px solid #fff;
    top:-25px;
    bottom:-10px;
    left:0;
    right:-10px;
    -moz-transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
}

勾选此http://jsfiddle.net/EJxFg/4/

文章来源: Adjacent divs with angled borders? [duplicate]