css – Is it possible to crop bottom of div/section using svg/png shape in html

  *{
    font-family: 'Open Sans';
  }
  body{
    margin: 0px;
  }
  img{
    width: 100%;
  }
  section{
    position: relative;
  }
  section svg {
      position: absolute;
      left: 0;
      top: 0;
  }

  section .content{
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 1;
  }

  section .top-clip {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
  }

  section .st0 {
      fill: transparent;
  }

  section #pattern_top {
      fill: transparent;
  }

  section #pattern_bottom {
      fill: transparent;
  }

  .pattern-prev-clip,.pattern-bottom-clip{
    /*background-size: 100% auto;*/
  }

  @media screen and (max-width: 768px) {
    .content > div{
      display: block !important;
    }

    .content .cnt-1{
      max-width: 100% !important;
    }
  }
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://demo.zhardsoft.com/arc-pattern-2/svg-inject.js"></script>
<script type="text/javascript">

  var svgInjectElements=[];
  var tt=0;
  
  SVGInject.setOptions({
      useCache: false, // no caching
      copyAttributes: false, // do not copy attributes from `<img>` to `<svg>`
      makeIdsUnique: false, // do not make ids used within the SVG unique
      afterInject: function(img, svg) {
        svgInjectElements[parseInt($(img).attr('img-arc'))]=svg;

        if(tt > $('.img-arc').length){
          svgInjectElements.forEach(function(svg){
            loadSVGInject(svg);
          })
        }
        tt++;

      },
    });

  function loadSVGInject(svg){
    var svgElm=$(svg);
    var parentSection=svgElm.parents('.section');
    var prevSection=svgElm.parents('.section').prev();
    // svgElm.parents('section').find('svg #pattern_bottom').wrap('<defs></defs>').wrap('<clipPath id="my-clip" clipPathUnits="objectBoundingBox"></clipPath>');
    var clipID=parentSection.attr('data-clip-id');
    var prevClipID=prevSection.attr('data-clip-id');

    parentSection.find('svg #pattern_bottom_clip').attr('id','pattern_bottom_clip_'+clipID);
    parentSection.find('svg #pattern_top_clip').attr('id','pattern_top_clip_'+clipID);

    var svgHeight=svgElm.height();
    parentSection.css({'background-position-y':'-'+svgHeight+'px'});
    
    parentSection.find('svg').css({'top':'-'+(svgHeight-1)+'px',});

    if(prevSection.find('.pattern-prev-clip').length<=0){
      parentSection.find('svg #pattern_top').attr('transform','scale('+(1/svgElm[0].viewBox.baseVal.width)+','+(1/svgElm[0].viewBox.baseVal.height)+')');
      var bgPrev=prevSection.css('background-image');
      var patternPrevClip=document.createElement('div');
          $(patternPrevClip).addClass('pattern-prev-clip').css({'-webkit-clip-path': 'url(#pattern_top_clip_'+clipID+')','clip-path': 'url(#pattern_top_clip_'+clipID+')'});
          $(patternPrevClip).addClass('pattern-prev-clip').css('background-image', bgPrev);
          // $(patternPrevClip).addClass('pattern-prev-clip').css('background-color', '#000');
      prevSection.append(patternPrevClip);

      var blockContent=document.createElement('div');
          $(blockContent).addClass('block-content');
      $(patternPrevClip).before(blockContent);
    }


    var baseHeight=svgElm.height()/svgElm[0].viewBox.baseVal.height;
    // console.log(svgElm.height()+" - "+svgElm[0].viewBox.baseVal.height);
    var ppcHeightTop=parseInt(parentSection.find('svg #pattern_top')[0].getAttribute('height'))*baseHeight;
    var ppcHeightBottom=parseInt(parentSection.find('svg #pattern_bottom')[0].getAttribute('height'))*baseHeight;

    if(prevSection.find('svg').length>0){
      var basePrevHeight=prevSection.find('svg').height()/prevSection.find('svg')[0].viewBox.baseVal.height;
      var ppcPrevHeightBottom=parseInt(prevSection.find('svg #pattern_bottom')[0].getAttribute('height'))*basePrevHeight;
    }

    
    // parentSection.css({'top':(svgElm.height()-ppcHeightTop)+'px'});
    prevSection.find('.pattern-prev-clip').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'});

    if(parentSection.find('.pattern-bottom-clip').length<=0){
      parentSection.find('svg #pattern_bottom').attr('transform','scale('+(1/svgElm[0].viewBox.baseVal.width)+','+(1/svgElm[0].viewBox.baseVal.height)+')');
      var bg=parentSection.css('background-image');
      var patternTopClip=document.createElement('div');
          $(patternTopClip).addClass('top-clip pattern-bottom-clip').css({'background-image': bg,'-webkit-clip-path': 'url(#pattern_bottom_clip_'+clipID+')','clip-path': 'url(#pattern_bottom_clip_'+clipID+')'});
      svgElm.before(patternTopClip);
    }
    parentSection.find('.pattern-bottom-clip').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'});

    // console.log("prev section id: "+(ppcPrevHeightBottom ?? 0));
    // console.log(((svgElm.height()-ppcHeightTop) + prevSection.find('.pattern-prev-clip').height()));
    // prevSection.find('.content').css('min-height',prevSection.height() - ((svgElm.height()-ppcHeightTop)) );
    // 
    // prevSection.css('min-height', (prevSection.find('.pattern-prev-clip').height() + prevSection.find('.content').outerHeight()) - (ppcPrevHeightBottom ?? 0) );
    prevSection.find('.block-content').css('min-height', (prevSection.find('.content').outerHeight() - ppcHeightTop) - (ppcPrevHeightBottom ?? 0) );
    parentSection.find('.content').css('top','-'+ppcHeightBottom+'px');

    if($('.section').last().attr('data-clip-id') == clipID){
      if(parentSection.find('.block-content').length<=0){
        var blockContent=document.createElement('div');
            $(blockContent).addClass('block-content');
        parentSection.append(blockContent);
      }
      var lastBlockContent=(parentSection.find('.content').outerHeight() - ppcHeightBottom);
      parentSection.find('.block-content').css('min-height',  (lastBlockContent > 0 ? lastBlockContent : 0) );
    }
    // prevSection.css('min-height',prevSection.height()-(svgElm.height()-ppcHeightTop));


    var prevSvgHeight=prevSection.find('svg').height();
    if(prevSection.find('.pattern-bottom-clip').nextAll('.pattern-prev-clip').length>0){
      $(patternPrevClip).css('background-position-y', '-'+prevSvgHeight+'px');
    }else{
      $(patternPrevClip).addClass('pattern-prev-clip').css('background-position-y', '-'+prevSection.find('.content').innerHeight()+'px');
    }
  }

  $(document).ready(function(){
    $('.img-arc').each(function(){
      SVGInject(this);
    })
  })

  $(window).on('resize',function(){
    svgInjectElements.forEach(function(svg){
      loadSVGInject(svg);
    })
    // $('section svg').each(function(){
    //   var svgElm=$(this);
    //   var svgHeight=svgElm.height();
    //   svgElm.parents('section').css({'background-position-y':'-'+svgHeight+'px'});
    //   svgElm.parents('section').find('.arc-overlay').css({'height':svgHeight+'px','top':'-'+(svgHeight-1)+'px'});
    //   svgElm.parents('section').find('svg').css({'top':'-'+(svgHeight-1)+'px',});
    // })
  })
  
</script>

</head>
<body>
    <section class="section" data-clip-id="1" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-2/y-so-serious.png);">
      <div class="content">
        <div style="padding: 0 40px;padding-top: 50px">
          <div class="cnt-1" style="color: #EBEBEB;padding: 0 40px;">
            <h1>ECOLOGICAL PRODUCTION</h1>
          <div style="padding: 20px;float: right"><img src="https://demo.zhardsoft.com/arc-pattern-2/img1.png" style="max-width: 300px"></div>
          We recycle all organic waste we produce, also, we obtain organic waste from other farms, restaurants, and food markets. The organic waste we collect allows a particular larva from the Hermetia illucens species, known commonly as black soldier fly larva (BSFL), to feeds on it and grow fatter. When the larva has developed to a pupa, it is cleaned, cooked and grided to a paste used as a high-quality protein and lipids perfectly suited as ecological animal feed, reducing the need for wild-sourced feed ingredients such as fishmeal which contributes to the global overfishing.</div>
        </div>
        <div style="padding: 0 40px;padding-top: 50px">
          <div class="cnt-1" style="color: #EBEBEB;padding: 0 40px;">
          <div style="padding: 20px;float: left"><img src="https://demo.zhardsoft.com/arc-pattern-2/img1.png" style="max-width: 500px"></div>
          We recycle all organic waste we produce, also, we obtain organic waste from other farms, restaurants, and food markets. The organic waste we collect allows a particular larva from the Hermetia illucens species, known commonly as black soldier fly larva (BSFL), to feeds on it and grow fatter. When the larva has developed to a pupa, it is cleaned, cooked and grided to a paste used as a high-quality protein and lipids perfectly suited as ecological animal feed, reducing the need for wild-sourced feed ingredients such as fishmeal which contributes to the global overfishing.</div>
        </div>
      </div>
    </section>
    <section class="section" data-clip-id="2" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-2/5-dots.png);">
      <div class="content">
        <div style="padding: 0 40px;padding-bottom: 60px">
          <div class="cnt-1" style="color: #EBEBEB;text-align: right;flex-grow: 1">
              <h1 style="color: #FDC403">LOCAL COMMUNITY<br>ENGAGEMENT.</h1>
            It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
          </div>
        </div>
      </div>
      <!-- <img src="arc_1.svg" onload="SVGInject(this);"/> -->
      <img img-arc="1" class="img-arc" src="https://demo.zhardsoft.com/arc-pattern-2/arc_1.svg"/>
    </section>
    <section class="section" data-clip-id="3" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-2/repeated-square-dark.png);">
      <div class="content">
        <div style="padding: 0 40px;padding-top: 50px">
          <div class="cnt-1" style="color: #EBEBEB;text-align: center;flex-grow: 1">
              <h1 style="color: #FDC403">LOCAL COMMUNITY<br>ENGAGEMENT. 2</h1>
              It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
              <img src="https://demo.zhardsoft.com/arc-pattern-2/img1.png" style="max-width: 400px">
          </div>
        </div>
      </div>
      <img img-arc="2" class="img-arc" src="https://demo.zhardsoft.com/arc-pattern-2/arc_2.svg"/>
    </section>
    <section class="section" data-clip-id="4" style="background-image: url(https://demo.zhardsoft.com/arc-pattern-2/papyrus-dark.png);">
      <div class="content">
        <div style="padding: 0 40px;padding-top: 50px">
          <div class="cnt-1" style="color: #EBEBEB;text-align: left;">
            <p><h1 style="color: #FDC403">LOCAL COMMUNITY<br/>ENGAGEMENT. 3</h1>
              <img src="https://demo.zhardsoft.com/arc-pattern-2/img1.png" style="float: right;max-width: 500px;padding: 0 40px">
              It is in our core believe that if you benefit the local community, the people there will add value to your business as well. For every site we establish a manufacturing facility, our project will add value to the community as whole. We will provide jobs for hundreds of local residents with positions available within our production, sales, administration, and management teams. We will also offer hundreds of local farmers opportunities to join our supply network, providing training, coaching, and financial support to help them adapt to a more intensive and efficient farming system. Through our research and development, anything learned or discovered will be shared with our farmers to produce more efficiently and a healthier product. One among many different local benefitting activities, is that we will arrange cleanup days where we offer students an extra income for their effort as well as courses in environment know-how and teach them the importance of keeping the environment healthy.
            </p>
          </div>
        </div>
      </div>
      <img img-arc="3" class="img-arc" src="https://demo.zhardsoft.com/arc-pattern-2/arc_3.svg"/>
    </section>
</body>
</html>

Leave a Comment