有角度的底部边框 - 全宽 [重复]

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

使其具有响应性有点棘手，因为百分比值不支持边框。

您将始终将最大边框大小设置为固定值。

在我们的例子中，我们将像以前一样使用 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 大小，带边框的框看起来像是在调整其宽度。

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