Question

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：

顺便说一下，我已经尝试过使用两个背景，比如：

 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：

需要支持的浏览器：

操作系统：Windows 8/10： **浏览器：Chrome 47/48 ** Firefox 43/44 ** Internet Explorer 11
操作系统：mac OSX 10.9 / 10.10 ** Chrome 47/48 ** Firefox 43/44 ** Safari 8/9
操作系统：android 5/6 ** Chrome最新版本
操作系统：iOS 8/9 ** Safari最新版本

Answer 1

您可以使用viewport related units作为边框，如Shape with a slanted side (responsive)中所述。这将允许您创建视口的50％宽度和100％高度的形状并响应：

required

* {
  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>和vh）具有良好的浏览器支持。有关详细信息，请参阅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

编辑：

编辑2：

2 个答案: