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/

问题在于它没有响应。我希望具有相同的设计，并且无论区域的高度和宽度如何，两个三角形都保持连接两个相对角的切割线。这对CSS有用吗？

更新

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

Answer 1

使用此CSS。 vh是视图高度，vw是视图宽度，因此100％响应:) 如果您使用另一个答案中提到的％，请小心，需要定义父容器的高度。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

你可以使用线性渐变来做到这一点 https://jsfiddle.net/RACCH/54s72wxq/

background:linear-gradient(to bottom right, transparent calc(50% - 1px), black calc(50% - 1px), black 50%, transparent 50%) ;

Answer 3

只是一个想法，但没有经过测试：您可以将SVG文件用作background-size: 100% 100%;的背景，它应该可以使用。

或background-size: cover;如果您希望背景保持比例（但如果该块的比率高于svg，则可能会被切断）。

背景与两个响应三角形

3 个答案: