skośne, responsywne tło w stylach css

Uzyskanie skosów w responsywnym tle, na górze czy dole bloku uzyskujemy poprzez:

<style>
  body{
    background:#e22117;
    padding-top:120px;
  }

  section {
      position: relative;
    min-height:50px;
    background:#f2c909;
    padding:10px 0;
  }

  .cant-top {
      content: ' ';
      position: absolute;
      z-index: 1;
      top: -60px;
      left: 0;
      width: 0;
      height: 0;
      border-top: 60px solid transparent;
      border-right: 20px solid #f2c909;
  }

  .cant-bottom {
      content: ' ';
      position: absolute;
      z-index: 1;
      bottom: -60px;
      left: 0;
      width: 0;
      height: 0;
      border-bottom: 60px solid transparent;
      border-left: 20px solid #f2c909;
  }
 
</style>

<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
jQuery(function($) {
  
  // get window width
  function takeOblique(){
        $('section .cant').each(function() {
            if ($(this).hasClass('cant-top'))
                $(this).css('border-right-width', $(this).parent().width() + "px");
            else if ($(this).hasClass('cant-bottom'))
                $(this).css('border-left-width', $(this).parent().width() + "px");
        });    
  }

    // Window Load
    $(window).load(function() {
        takeOblique()
    });

    // Window Resize
    $(window).resize(function() {
        takeOblique()
    });

});
</script>

    <section>
        <div class="cant cant-top"></div>
      text, more of text    
    <div class="cant cant-bottom"></div>
    </section>

https://css-tricks.com/snippets/css/css-triangle/