Question

我有一个网站的模型，其中一个英雄部分由两个部分组成，以相同的角度对角分割。这两个部分有内容，需要扩展以适应内容。

我尝试过此处描述的方法：two divs split with diagonal line - CSS 但它对内容的效果不佳;向div添加文本只是扩展矩形而不是三角形。如何使用内容扩展框？

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

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

Answer 1

问题不是那么清楚：

缩放到内容

我认为这意味着它应该在窗口调整大小（??）之后保持相同的方面。

// 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。分割是用对角线进行的，它适合窗口调整大小。

如果效果不理想，请修改问题以更明确地“缩放到内容”我很乐意为您提供帮助。

用对角线分割两个div，缩放到内容

1 个答案: