Html 使用flex连接对角div

我有两个div。右div是按对角线剪切的图像。左div中必须有一些文本。我希望它能像这样完全响应：

当我更改窗口大小时会出现问题，它会像图中那样崩溃：

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

#对角线{
显示器：flex；
宽度：100%；
}
#对角线#ct关于左列{
宽度：60%；
右边框：190px实心透明；
边框底部：500px纯色灰色；
z指数：2；
}
#斜跨{
显示：无；
}
#关于col right{
高度：500px；
宽度：50%；
边框：2倍实心；
背景图片：url（images/content/about/right col image.jpg）；
z指数：0；
左边缘：-12%；
右边距：0；
}
}

我们是最好的
text1 text1 text1
text2text2text2text2text2
阅读更多

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

只需创建一个ID为的全宽div，比如说

ct about

，给它一个背景色

灰色

，然后简单地将图像背景链接到颜色顶部，如下所示：

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

这只是告诉浏览器，把我的盒子变成灰色，然后把图像放在灰色上面。

no repeat right top

属性阻止浏览器重复图像，因此您不会得到平铺，请告诉ti将图像放置在最右侧和顶部位置

这样，一切都会响应良好

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

您可以在

---

可以考虑稍微不同的标记和添加图片的方法（作为背景图像），并生成角度（带有变换：歪斜）。

现场演示：

内容

*{框大小：边框框；}
.集装箱{
宽度：100%；
高度：50vh；
溢出：隐藏；
背景图像：url（“http://unsplash.it/600");
背景尺寸：封面；
背景重复：无重复；
背景位置：100%50%；
}
.标题{
身高：100%；
宽度：50%；
最小宽度：500px；
垫面：20%；
左侧填充：130像素；
背景色：#ddd；
变换：倾斜（10度，0度）；
变换原点：100%100%；
}
.标题p{
变换：倾斜（-10度，0度）；
}

这看起来很有希望实现我想要的目标，但在代码中，p标记内的文本没有显示出来。我希望文本在左div上可见。问题是

填充顶部：20%

规则强制

p

向下太多-这是相对于宽度计算的-但由于

top

不是，所以很容易解决：将其更改为

填充顶部：10px；最高：20%<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);
}