html - 具有两个响应三 Angular 形的背景

Question

我有以下 html:

<div class="text-beside-wrapper">
  <div class="text-beside">
      some text goes here.
  </div>
</div>

CSS如下:

body {
    padding: 0;
    margin:0;
  
}
.text-beside-wrapper {
    background-color: #e3dfdc;
    height: 415px;
    width: 300px;
}

.text-beside-wrapper:after {
    border-right: 300px solid transparent;
    border-top: 415px solid #dbd5c5;
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    z-index: 5;
}

这是演示:https://jsfiddle.net/zby230f9/7/

问题是它没有响应。我希望有相同的设计，无论区域的高度和宽度如何，两个三 Angular 形都保持连接两个对 Angular 的切割线。这可以用 CSS 实现吗？

更新

我忘了提到上面使用的 height: 415px 和 width: 300px 因为桌面上的文本就是这样的。我不想保持相同的比例，因为文本区域(类 text-beside)的高度和宽度可以随任何比例变化。

Answer 1

使用这个 CSS。 vh 是 View 高度，vw 是 View 宽度，所以 100% 响应:) 如果您使用另一个答案中提到的 % ，请小心，需要定义父容器的高度。

body {
  margin: 0;
  padding: 0;
}

.text-beside-wrapper {
  background-color: #e3dfdc;
  height: 40vh;
  width: 30vw;
}

.text-beside-wrapper:after {
  border-right: 30vw solid transparent;
  border-top: 40vh solid #dbd5c5;
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  z-index: 5;
}

<div class="text-beside-wrapper">
  <div class="text-beside">
  </div>
</div>