具有倾斜边的形状(响应)

Question

具有倾斜边的形状(响应)我正在尝试创建一个形状，如下图中的只在一侧倾斜边缘(例如，底部)而其他边则保持直线。我尝试使用边框方法(下面给出代码)，但是形状的尺寸是动态的，因此我不能使用这个方法。.shape {    position: relative;    height: 100px;    width: 200px;    background: tomato;}.shape:after {    position: absolute;    content: '';    height: 0px;    width: 0px;    left: 0px;    bottom: -100px;    border-width: 50px 100px;    border-style: solid;    border-color: tomato tomato transparent transparent;}<div class="shape">    Some content</div>我也尝试过对背景使用梯度(如下面的代码)，但是随着维度的变化，它会变得一团糟。在下面的片段中，你可以看到我在形状上盘旋的意思。.gradient {  display: inline-block;  vertical-align: top;  height: 200px;  width: 100px;  margin: 10px;  color: beige;  transition: all 1s;  padding: 10px;  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;}.gradient:hover {  width: 200px;}<div class="gradient"></div>我如何创建这个有倾斜边的形状也能支持动态尺寸?

Answer 1

我的解决方案被称为方法7-查看端口单元上面这页是Andrea Ligios写的。

我也用“水平”单位来表示高度。height:10vw当调整导航窗口的宽度时，要在梯形中保持给定的比例。我们可以称之为方法7b-视口宽度.

此外，使用两个嵌套的divS，而不是一个和:after在我看来，选择器允许更好地调整文本内容样式。text-align等等)。

.dtrapz {

  position: relative;

  margin: 10px 40vw;

  width: 0;

  height: 10vw;

  border: none;

  border-right: 20vw solid #f22;

  border-bottom: 5vw solid transparent;

}

.dtcont {

  position: absolute;

  width: 20vw;

  height: 10vw;

  text-align: center;

  color: #fff;/* just aesthetic */

}

<div class="dtrapz">

  <div class="dtcont">Some content</div>

</div>