css for cliping the path from bottom corners with border-radius

Question

I am working on UI for making the exact clone of the figma design where I need to create a section with a border radius on both the sides but some how it is not working for me. Below is the figma design https://www.figma.com/file/nvsrIWnKXgpDmlsExz8g8s/3-diferent-landings?node-id=178%3A2

Below is the url where I have implemented the design https://sarthakbusiness.devemr.growthemr.com/service/g99landingpage3

Here is the code for it

.header {
    position: relative;
    padding-top: 130px;
    padding-right: 0px;
    padding-bottom: 175px;
    padding-left: 0px;
    z-index: 99;
}
.header::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgb(27, 21, 37);
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 85%);
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
    z-index: -99;
}

<div class="header">
    <div class="orange-dot"></div>
    <div class="blue-dot"></div>
    <div class="header-content">
</div>

Is there a way to achieve it without using it in background image. Any help will be highly appreciated

Answer 1

Need multiple css clip paths we can make exact figma polygon design clone in our page. So take both polygon separately in svg format.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 722 579.1" xml:space="preserve">
<style type="text/css">
    .shape_1_path{fill:#1B1423;}
</style>
<path class="shape_1_path" d="M695.3,579.1l-665-76.9c-10.5-1.2-18.6-10-18.8-20.6L0,0h722v552.4C722,567.2,710,579.1,695.3,579.1z"/>
</svg>

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 722 591.8" xml:space="preserve">
<style type="text/css">
    .shape_2_svg{fill:#F6811D;}
</style>
<path class="shape_2_svg" d="M687.2,591.7l-663-78.2C12.1,512.1,3,501.8,2.9,489.7L0,0h722l-14.5,574.1C707.2,584.8,697.8,592.9,687.2,591.7
    z"/>
</svg>

Now we need to convert svg path to css clip path. In this example used online svg path converter

After converted each svg one by one we can directly used in our css. Here clip path elements are position absolutely, because one or more clip paths overlaps or clip paths collapsed and not proper visible. Position absolute doesn't affect when content increase because clip path elements width and height relative to the parent element.

.shape_container
{
    position: relative;
    width: 100%;
    min-height: 591.8px; /* taken largest height */
    display: inline-block;
    padding-bottom: 7rem; /* prevent content hidden */
    box-sizing: border-box;
}

.shape_1 
{ 
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: calc(100% - 12.7px); /* difference of 591.8px - 579.1px */
    clip-path: polygon(calc(100% - 26.7px) calc(100% - 0px), 30.3px calc(100% - 76.9px), 30.3px calc(100% - 76.9px), 27.2275px calc(100% - 77.4822px), 24.332px calc(100% - 78.4856px), 21.6465px calc(100% - 79.8754px), 19.204px calc(100% - 81.6168px), 17.0375px calc(100% - 83.675px), 15.18px calc(100% - 86.0152px), 13.6645px calc(100% - 88.6026px), 12.524px calc(100% - 91.4024px), 11.7915px calc(100% - 94.3798px), 11.5px calc(100% - 97.5px), 0px 0px, calc(100% - 0px) 0px, calc(100% - 0px) calc(100% - 26.7px), calc(100% - 0px) calc(100% - 26.7px), calc(100% - 0.35069999999996px) calc(100% - 22.356px), calc(100% - 1.3655999999999px) calc(100% - 18.24px), calc(100% - 2.9888999999999px) calc(100% - 14.406px), calc(100% - 5.1648px) calc(100% - 10.908px), calc(100% - 7.8375px) calc(100% - 7.8px), calc(100% - 10.9512px) calc(100% - 5.136px), calc(100% - 14.4501px) calc(100% - 2.9699999999999px), calc(100% - 18.2784px) calc(100% - 1.356px), calc(100% - 22.3803px) calc(100% - 0.34799999999996px), calc(100% - 26.7px) calc(100% - 1.1368683772162E-13px)); 
    background-image: linear-gradient(#1B1423,#1B1C31,#1D1625);
}

.shape_2
{ 
  position: absolute;
  top: 0px;
  left: 0px;                
  width: 100%;
  height: 100%;
  clip-path: polygon(calc(100% - 34.8px) calc(100% - 0.099999999999909px), 24.2px calc(100% - 78.3px), 24.2px calc(100% - 78.3px), 20.666px calc(100% - 78.9799px), 17.348px calc(100% - 80.1512px), 14.282px calc(100% - 81.7713px), 11.504px calc(100% - 83.7976px), 9.05px calc(100% - 86.1875px), 6.956px calc(100% - 88.8984px), 5.258px calc(100% - 91.8877px), 3.992px calc(100% - 95.1128px), 3.194px calc(100% - 98.5311px), 2.9px calc(100% - 102.1px), 0px 0px, calc(100% - 0px) 0px, calc(100% - 14.5px) calc(100% - 17.7px), calc(100% - 14.5px) calc(100% - 17.7px), calc(100% - 14.8551px) calc(100% - 14.5747px), calc(100% - 15.7088px) calc(100% - 11.6456px), calc(100% - 17.0137px) calc(100% - 8.9529px), calc(100% - 18.7224px) calc(100% - 6.5368px), calc(100% - 20.7875px) calc(100% - 4.4375px), calc(100% - 23.1616px) calc(100% - 2.6952px), calc(100% - 25.7973px) calc(100% - 1.3501px), calc(100% - 28.6472px) calc(100% - 0.44239999999991px), calc(100% - 31.6639px) calc(100% - 0.012299999999868px), calc(100% - 34.8px) calc(100% - 0.10000000000002px)); 
  background-image: linear-gradient(#F6811D,#FC891D,#FC8820);
}

<div class="shape_container">
  <div class="shape_2"></div>
   <div class="shape_1"></div>
</div>

Answer 2

a skew transformation with box-shadow can do it

.container {
  height:300px;
  overflow:hidden;
  position:relative;
  z-index:0;
}
.container:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-100px 0 10px 10px;
  transform-origin:right;
  transform:skewY(10deg);
  background:blue;
  border-radius:30px;
  box-shadow: -10px 10px  orange;
}

<div class="container"></div>