使用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）。根据需要更改坐标。