html - 用对 Angular 线拆分两个 div，缩放到内容

Question

我有一个网站的模型，它有一个由两个部分组成的英雄部分，以相同的 Angular 对 Angular 线分割。这两个部分都有内容，需要缩放以适应内容。

我已经尝试过这里描述的方法:two divs split with diagonal line - CSS但它不适用于内容；向 div 添加文本只会扩展矩形而不是三 Angular 形。如何让方框随内容缩放？

我会发表评论，但我没有声誉 :/

编辑:通过缩放到内容，我的意思是如果我将内容添加到其中一个 div，该 div 应该能够容纳其中的所有内容。两个 div 都需要具有相同的高度。对任何混淆表示歉意:)

Answer 1

问题不是很清楚:

scaling to content

我想这意味着它应该在窗口调整大小后保持相同的纵横比 (??)。

// Create a flex container
.hero {
  display: flex;
  height: 500px;
  width: 100%;
  flex-flow: row nowrap; // make the two divs side by side
  font-size: 2em;
  color: white;
  font-family: sans-serif;
  position: relative;
}

// apply basic styles to the divs
.hero div{
  display: flex;
  position: relative;
  background-color: tomato;
  width: 50%;
  padding: 50px;
}

// + 100px for :after and :before to fit
// + 10px for the space we really want to see between diagonal
.hero div:first-child{
  margin-right: 110px;
}

.hero_1:after, .hero_2:before{
  content:'';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

// Add a triangle at the end and starts of both divs to simulate diagonal
.hero_1:after {
    left: 100%;
    border-top: 500px solid tomato;
    border-right: 100px solid transparent;
}
.hero_2:before {
    right: 100%;
    border-bottom: 500px solid tomato;
    border-left: 100px solid transparent;
}

请看这个codepen .拆分是用对 Angular 线进行的，它适合窗口调整大小。

如果不是预期的效果，请编辑问题以更明确地说明“按内容缩放”，我很乐意提供帮助。