Complex curved border header

Question

I want to achieve to following design:

This is what I already have:

.header {
  width: 100%;
  min-height: 500px;
  background-color: #2F4F4F;
  color: #FFF;
  overflow: hidden;
  position: relative;
  border-bottom-right-radius: 500px;
}

.header:before {
  content: '';
  background: rgb(47, 79, 79);
  background: linear-gradient(90deg, rgba(47, 79, 79, 1) 20%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.header__image__wrapper {
  padding-right: 1rem;
  border-bottom-right-radius: 500px;
}

.header__image {
  background: url('https://images.unsplash.com/photo-1662530787378-966cc9f87a8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80');
  background-position: right center;
  background-size: cover;
  width: 100%;
  height: 500px;
  border-bottom-right-radius: 500px;
}

This is the SVG that can be used as a clipping path:

My current struggles are:

The border that goes outside the div on the bottom left side. That's the blue part that "sticks" outside the element.
The uneven spacing (padding) between the image and box on the right and bottom. You still see some blue from the wrapper on the right bottom. So I guess it can be done with some padding?
It's really important that the top right (images + blue background must be in a "point".

Arash Seifi · Answer

         #container {
        margin: 0 auto;
        background: greenyellow;
        width: 90vw;
        height: 100vh;
        -webkit-clip-path: url(#myClip);
        clip-path: url(#myClip);
    }

    .underContent {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        z-index: 1;
        top: 0;
        background-color: green;
    }

    .content {
        width: 50%;
        position: absolute;
        left: 10%;
        top: 30%;
    }

    .aboveContent {
        background-color: rgb(246, 255, 0);
        z-index: 2;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        clip-path: url(#myClip2);
    }


    
        
    
    
        
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates libero incidunt facilis ex mollitia
            accusantium nobis

I think clip-path is what you are looking for. you can make a clip-path and use it for your container

Dax Patel · Answer

I try to resolve your problem. you can check here

Abhishek Kokate · Answer

Here is an approach to achive what are you aiming for:

If you want to change the color or the border you need to change the hex color code in 2nd path's fill (fill="#888888").

.header-svg{
  background: url('https://images.unsplash.com/photo-1662530787378-966cc9f87a8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80');
  background-position: right center;
  background-size: cover;
  width:100%;
  height:100%;
}


.header-container{
  width:100vw;
}

Complex curved border header

3 Answers