响应自定义形状 div 页脚

Question

我的一个网站有自定义形状的页脚，这可以完全在 css 中实现吗？我将在 bootstrap 容器流体中应用它，所以形状应该延伸到容器流体。

提前致谢！

Answer 1

1.The Html 代码：

  <div class="footer-outer">
    <span class="footer-arrow"></span> <!-- This is for the top part of the background -->
    <span class="footer-circle"></span> <!-- This is for the circle -->
    <div class="footer-inner">

    </div>
  </div>

2.The CSS 代码：

body { padding: 0; margin: 0; }

.footer-outer { margin-top: 150px; height: 200px; background: #415061; position: relative; }

.footer-arrow { width: 0; height: 0; border-style: solid; border-width: 0 200px 100px 200px; border-color: transparent transparent #415061 transparent; position: absolute; top: -100px; left: 0; font-size: 0; line-height: 0; text-indent: -4000px; }

.footer-circle { position: absolute; left: 50%; border-radius: 50%; margin-left: -40px; top: -140px; width: 80px; height: 80px; background: #eee; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }

.footer-inner { height: 300px; top: -100px; left: 0; right: 0; position: absolute; }

3.ThejQuery代码：

$(document).ready(function() {
  stretchArrow();
});

$(window).resize(function(){
  stretchArrow();
});

function stretchArrow(){
  _width = Math.floor($(window).width() / 2);

  $('.footer-arrow').css('border-width', '0 ' + _width + 'px 100px ' + _width + 'px');
}

4.If 您希望箭头指向下方：

改变这个CSS：

.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }

有了这个：

.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 28px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 2px solid #415061; border-right: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 20px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }

这是一个工作示例：https://jsfiddle.net/874zxr6h/

以及向下箭头的工作示例： https://jsfiddle.net/874zxr6h/1/

响应自定义形状 div 页脚

Responsive Custom Shape div footer

css

footer

css-shapes