javascript - 倾斜底部边框 - 全宽

Question

这个问题已经有答案了:

CSS responsive slanted edge (1 个回答)

已关闭 7 年前。

我想知道如何创建一个宽度为 100% 的 div，宽度为 300 像素，其中底部边框与框的整个宽度略有 Angular 。

它可以用 CSS 或 JavaScript 完成，但需要响应式。我见过使用边框的示例，但说实话，我并不完全理解如何使用边框来实现 super 奇特的形状。

Answer 1

您正在寻找的是这样的:

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

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

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

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

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

}

这是一张纯粹的边框图，拉伸(stretch)和调整大小后看起来很坚固。

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

如果您更新 fiddle 中的 .box_wrapper 大小，边框框看起来就像正在调整其宽度。

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