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

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 {&nbsp; position: relative;&nbsp; margin: 10px 40vw;&nbsp; width: 0;&nbsp; height: 10vw;&nbsp; border: none;&nbsp; border-right: 20vw solid #f22;&nbsp; border-bottom: 5vw solid transparent;}.dtcont {&nbsp; position: absolute;&nbsp; width: 20vw;&nbsp; height: 10vw;&nbsp; text-align: center;&nbsp; color: #fff;/* just aesthetic */}<div class="dtrapz">&nbsp; <div class="dtcont">Some content</div></div>