对角线形状 100% 高度 CSS

Question

好吧，事情是这样的。这就是我想要完成的，我到目前为止所做的：

问题是我现在使用硬编码像素，但它确实需要更快的响应。所以它需要 100% 的高度（不是现在的 200px）。 diagonal 和 content 容器的总宽度需要为 50%，如上图所示（因此不像现在那样硬编码为 100px）。主要问题似乎是对角线，因为我几乎只能使用像素而不是百分比。所以如果内容块得到更多的内容，它会扩展，但对角线不会，这是一个问题。

看起来绝对位置可以解决这个问题，但是我真的不能再将内容块和对角线块放在一起了。现在我给了它们两种不同的颜色以便清楚，但在实际示例中它们需要看起来像具有相同背景颜色的一个形状。

.shape {
  width:400px;
  margin:0 auto;
  display: block;
  height: 200px;
  position: relative;
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
  
}
.diagonal {
  height:0;
  border-width: 0px 0 200px 100px;
  border-style:solid;
  border-color: transparent transparent transparent #d71f55 ;
  float: left;
  
}
.content {
  height: 100%;
  width: 100px;
  background-color: #888;
  float: left;
  color: #fff;
}

<div class="shape">
  <div class="content">
    Content goes here
    Like this
  </div>
  <div class="diagonal"></div>
</div>

编辑：

顺便说一句，我也已经尝试过使用两个背景，例如：

 background-color: #f87f73;
  background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
  background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);

但这真的很难看。太像素化了。

编辑 2：

需要支持的浏览器：

OS: windows 8/10 : ** 浏览器：Chrome 47/48 ** 火狐 43/44 ** 互联网浏览器 11
OS: mac OSX 10.9/10.10 ** Chrome 47/48 ** 火狐 43/44 ** 野生动物园 8/9
OS: android 5/6 ** Chrome最新版本
OS: iOS 8/9 ** Safari 最新版本

Answer 1

您可以使用 viewport related units for the border as described in 。这将允许您将形状设置为视口的 50% 宽度和 100% 高度并响应：

* {
  margin: 0;
  padding: 0;
}
.shape {
  width: 100%;
  margin: 0 auto;
  display: block;
  height: 100vh;
  position: relative;
  background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.diagonal {
  height: 0;
  border-width: 0 0 100vh 25vw;
  border-style: solid;
  border-color: transparent transparent transparent #d71f55;
  float: left;
}
.content {
  height: 100vh;
  width: 25vw;
  background-color: #888;
  float: left;
  color: #fff;
}

<div class="shape">
  <div class="content">
    Content goes here Like this
  </div>
  <div class="diagonal"></div>
</div>

Viewport 相关单元（vh 和 vw）有良好的浏览器支持。有关详细信息，请参阅 canIuse

Answer 2

这可能是我的处理方式。使用硬 50/50 渐变而不是边框使它变得非常微不足道。它似乎在 chrome 中显示正常，但我还没有检查其他浏览器。如果你想把它放在容器里，记得将容器设置为 position: relative

.shape {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    display: block;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}

.content {
    height: 100%;
    width: 25%;
    background-color: #888;
    color: #fff;
    float: left;
}

.diagonal {
    height: 100%;
    width: 25%;
    background: linear-gradient(to bottom right, #888 50%, transparent 50%);
    float: left;
    border: none;
}


<div class="shape">
  <div class="content">
    Content goes here Like this
  </div>
  <div class="diagonal"></div>
</div>

对角线形状 100% 高度 CSS

Diagonal shape 100% height CSS

html

css

css-shapes

编辑：

编辑 2：