用flex连接对角线div

Question

我有2个div。右边div是对角线切割的图像。左div必须在里面有一些文字。我想要这样做完全响应：

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

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

＆＃13;

＆＃13;

#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;
}
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

现场演示：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规则。

只需创建一个全宽div，其ID为ct-about，给它一个背景色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背景的更多信息