用 flex 连接对角线 div

Question

我有 2 个 div。右 div 是对角线切割的图像。左边的 div 里面必须有一些文本。我希望它能够像这样完全响应：

当我更改窗口大小时出现问题，它像图像中一样折叠：

.

左侧 div 上还有一个需要显示的文本，但是使用 flex 似乎不起作用，所以我禁用了它。请为此提供解决方案。 这是我的css和html：

#diagonal {
  display: flex;
  width: 100%;
}
#diagonal #ct-about-col-left {
  width: 60%;
  border-right: 190px solid transparent;
  border-bottom: 500px solid grey;
  z-index: 2;
}
#diagonal span {
  display: none;
}
#ct-about-col-right {
  height: 500px;
  width: 50%;
  border: 2px solid;
  background-image: url(images/content/about/right-col-image.jpg);
  z-index: 0;
  margin-left: -12%;
  margin-right: 0;
}
}

<div id="diagonal">
  <div id="ct-about-col-left">
    <span>We are the best</span>
    <span>text1 text1 text1</span>
    <span>Text2 text2 text2 text2</span>
    <div>
      <span>Read more</span>
    </div>
  </div>
  <div id="ct-about-col-right"></div>
</div>

Answer 1

也许考虑一个稍微不同的标记和添加图片（作为背景图像）和制作角度（使用变换：倾斜）的方法。

现场演示：http://codepen.io/anon/pen/rjyKRo

<div class="container">
  <div class="caption">
    <p>CONTENT</p>
  </div>
</div>


* { box-sizing: border-box; }

.container {
  width: 100%;
  height: 50vh;

  overflow: hidden;

  background-image: url("http://unsplash.it/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

.caption {
  height: 100%;
  width: 50%;
  min-width: 500px;
  padding-top: 20%;
  padding-left: 130px;
  background-color: #ddd;

  transform: skew(10deg, 0deg);
  transform-origin: 100% 100%; 
}

.caption p {

  transform: skew(-10deg, 0deg);
}

Answer 2

我可以建议另一种方法，它可以为您节省一些标记空间和 CSS 规则。

只需创建一个 ID 为 ct-about 的全角 div，给它一个背景颜色 grey，然后简单地将图像背景链接到颜色顶部，如下所示：

background: url('images/content/about/right-col-image.jpg') no-repeat right top, grey;

这只是告诉浏览器，将我的框设为灰色并将该图像置于灰色之上。 no-repeat right top 属性阻止浏览器重复图像，因此您不会获得平铺，告诉 ti 将图像放置在最右边和最上面的位置。

这样，一切都会响应。

这里有一个Fiddle，供您更好地理解。

您可以在 Mozilla Developer Network

中找到有关多种 CSS 背景的更多信息