Search code examples
cssfootercss-shapes

Responsive Custom Shape div footer

one of my website have a custom shape footer, is this possible to do purely in css? im going to apply this in a bootstrap container-fluid, so the shape should stretch to the container-fluid.

Thanks in advance!

FOOTER SCREENSHOT

UPDATED FOOTER

Solution

  • 1.The Html code:

      <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 code:

    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.The jQuery code:

    $(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 you want the arrow to be pointing down:

    Change this 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; }

    With this one:

    .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; }

    Here is a working example: https://jsfiddle.net/874zxr6h/

    And a working example for the arrow pointing down: https://jsfiddle.net/874zxr6h/1/