有角度的底部边框 - 全宽

Question

我想知道如何创建100％宽度的div，并说300px宽，其中底部边框在整个盒子的宽度上略微倾斜。

它可以在CSS或javascript中完成，但它需要响应。我已经看过使用边框的例子，但如果我说实话，我不完全理解使用边框来获得超级眩晕的形状。

Answer 1

您正在寻找的是这样的：

<div class="box"></div>

我们想要指定我们想要使用边框作为主要绘图功能。

我们希望左下边框是透明的。

然后，如果我们对它应用合理的高度，我们会看到它接近你的图像..

.box {
    border-right: 300px solid red;
    border-bottom: 10px solid transparent;
    height:100px;

}

这是一张纯粹的边框图，拉伸和尺寸非常大，看起来很坚固。

JSFiddle

使其响应更加棘手，因为百分比值不支持边框。

您将始终以固定值设置maximux边框大小。

在我们的例子中，我们将使用300 px，因此我们的.box类就像这样：

.box {
    border-right: 300px solid red;
    border-bottom: 10px solid transparent;
    height:100px;
    width:100%;
    right:0px;
    float:right;
}

我们要向右拉，这样看起来很漂亮的图像实际上会向左浮动。

然后我们将添加一个隐藏溢出的包装器，因此即使border-image不会改变大小，溢出也会使它看起来像现在一样。

.box_wrapper{
    width:100px;
    overflow:hidden;
    left:0px;
}

我们的HTML获得了一个包装器：

  <div class="box_wrapper">
      <div class="box"></div>
  </div> 

结果是一个响应性的解决方法！

JSFiddle 2

如果您更新小提琴中的.box_wrapper尺寸，则有边框会看起来像是调整其宽度。

注意 ：可能有更好的方法来实现这一目标！