css - 使用 Bootstrap 创建响应式形状

Question

我正在尝试在 Bootstrap 中创建以下形状以使其响应。我已经能够让整个容器变形，但是我试图让只有底部有倾斜。这将是页面上的页脚，所以我最终会在它的左侧放置文本。

这是我想要的效果:

到目前为止，这是我的代码:

<footer class="footer container-fluid">
  <div class="skew">
      <div class="header-inner">
        <ul class="list-inline">
          <li><h3>1</h3></li>
          <li><h3>2</h3></li>
          <li><h3>3</h3></li>
          <li><h3>4</h3></li>
        </ul>
      </div>
  </div>
</footer>

.footer {
  z-index: 1;
  position: relative;
  padding-top: 80px;
}

.footer .skew:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: red;
  z-index: -1;
  -webkit-transform-property: bottom;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
}

.footer .skew .header-inner {
  max-width: 850px;
  padding: 0 20px;
  margin-left: auto;
  margin-right: auto;
  color: $white;
}

这是它目前的样子:

有什么建议吗？

Answer 1

您可以在文本后面使用 SVG 吗？你可以尝试这样的事情:

http://codepen.io/tinyglowstudio/pen/Mwdoxm

<svg style="position:absolute;width:100%;height:200px; left:0" viewBox="0 0 10 10" preserveAspectRatio="none">
    <path d="M0,0 L10,0 L0,10 z" fill="#F00" />
</svg>

preserveAspectRatio 允许图像在方框的任何方向上缩放。现在，我正在从左上角(我们的 viewBox 的 M0,0)到右上角(L10,0)，到左下角(L0,10)然后回到起点(z ).根据需要更改坐标。