html - 用 flex 连接对 Angular 线 div

Question

我有 2 个 div。右边的 div 是对 Angular 线切割的图像。左边的 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

也许可以考虑使用稍微不同的标记和添加图片(作为背景图像)和制作 Angular (使用变换:倾斜)的方法。

现场演示: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);
}