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

使用 Bootstrap 创建响应形状

Creating a responsive shape with Bootstrap

css

twitter-bootstrap

css-shapes