layout-clip-path

by kairavthakar2016

HTML

<html lang="en" class="" style="">

  <head>
    <meta charset="utf-8">
    <title>Print Portal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Manrope&amp;display=swap" rel="stylesheet">
    <style>
      @import url(https://fonts.googleapis.com/css2?family=Manrope&display=swap);

    </style>
  </head>

  <body>
    <div>
      <div id="Report_1_Page_1"  class="page landscape" style="height:8.2in !important; width:11in !important;">
        <div class="bp-coverpage-3">
            <div class="bp-coverpage-header">
              <div class="header-section-top">                
              </div> 
              <span class="client-tag-line"> <img class="LogoImageSize" src="https://static4.depositphotos.com/1020822/359/v/950/depositphotos_3595189-stock-illustration-abstract-security-logo.jpg" alt="Logo"> </span>
              
              <div class="header-section-bottom"></div>
            </div>
            <div class="bp-coverpage-content">
            <div class= "content-section-top">
            <div class="report-name-container">
                <span class="report-name">Quarterly Review - United States -2022-1</span>
              </div>
            </div>            
            <div class= "content-section-bottom">
   <div class="bottom-shape">
    <div class="account-name">
                            <!-- <span>Niranja Industries Pension Fund - Region India</span>-->
                <span>Niranja Industries Pension Fund - Country India TEST 60 CHAR THEN MOVE TO NEXT LINE</span>
                </div>
              <div class="report-date">September 30, 2022</div> 
   </div>         
            </div>
            </div>            
            <div...

CSS

.page {
    margin-bottom: 5px;
    border: 1px solid #DEDEDE;
}

.landscape {
    height: 8.2in;
    font-size: 10px;
    position: relative;
    page-break-after: always;
    /* page-break-inside: avoid; */
    font-family: Verdana;
}


.bp-coverpage-3 {   

    width: 100%;
    height: 100%;
}


.bp-coverpage-3  .bp-coverpage-header {
        width: 100%;
        height: 3.2in;
    }

.bp-coverpage-3 .LogoImageSize {
    max-height: 1.6in;
    max-width: 3.1in;
}

.bp-coverpage-3 .bp-coverpage-header > .header-section-top {
    width: 100%;
    padding-top: 5%;
}

.bp-coverpage-3 .bp-coverpage-header .client-tag-line {
    float: right;
    margin-right: 25px;
}

.bp-coverpage-3 .bp-coverpage-header .header-section-bottom {
    width: 100%;
    padding-top: 10%;
}

.bp-coverpage-3 .bp-coverpage-content {
    width: 100%;
    border:1px solid #999;
    font-family: Manrope SemiBold !important;
    background: url(https://as2.ftcdn.net/v2/jpg/04/38/64/95/1000_F_438649569_DsSHTkasH6GqqQXwu7FbRG0OMHstAc2D.jpg) no-repeat bottom -120px right -170px ;
    background-size: 80%;
}

.bp-coverpage-3  .content-section-top {
  background:transparent;
}

.bp-coverpage-3  .content-section-bottom {
  background-color:transparent;
}
.bp-coverpage-3 .bp-coverpage-content  .report-name-container {
        padding: 0px 0px 0px 40px;
        background: #61626B;
        width:35%;
        position:relative;
        z-index:1;
    }
.bp-coverpage-3 .bp-coverpage-content .report-name-container:after {
    content: '';
    position: absolute;
    bottom: 0;
    z-index: -1;
    top: 0;
    left: calc(100% - 58px);
    background: #61626b;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    width: 135px;
    height: 100%;
    z-index: -1;
}
.bp-coverpage-3 .bp-coverpage-content  .report-name-container:before {
  content:'';
  border-top: 90px solid #61626B;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  position:absolute;
  top:0;
  right:-80px;
 ...