具有角度边框的相邻div？ [复制]答案

【问题标题】：Adjacent divs with angled borders? [duplicate]具有角度边框的相邻div？ [复制]
【发布时间】：2012-05-21 01:15:11
【问题描述】：

我想创建两个向左浮动的 div，但是有一个倾斜的有角度的边框将它们分开。我附上了一张图片来说明我的意思。

有谁知道CSS是否可以实现这样的事情（用溢出切断内容：我猜是隐藏的）

这些 div 需要包含被边框截断的图像，这里是一个示例：

【问题讨论】：

您需要支持哪些浏览器？是否需要支持旧版本的 IE？
@thirtydot 不需要支持旧 IE :)

标签： css html css-shapes

【解决方案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>

【讨论】：

看起来不错，但有一点需要注意。我实际上希望 div 中有一个图像，它会被有角度的边缘切断。当我将照片添加到您的代码时，它不会保持角度:(
这不在要求中:)
你是对的，我已经更新了原始帖子以更好地描述我在寻找什么。感谢您的努力！
这是个混蛋。干得好
这很好，但是如何编辑此代码以使用流体高度？因此，如果左侧 div 有 2 段文本（长度可能会改变），你如何确保角度保持 100% 高度？目前没有。

【解决方案2】：

到目前为止，所有解决方案都依赖于使用非常厚的有角度的边框来划分照片。

为避免这种情况，您需要制作一个容器并将其倾斜。然后反方向倾斜图像。

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

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

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

【讨论】：

这有一个缺点是左侧和右侧外侧也有角度，请参阅imgur.com/a/3gYE3s5

【解决方案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/

【讨论】：