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;
}

<header class="header">
  <div class="header__image__wrapper">
    <div class="header__image">
    </div>
  </div>
</header>

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

<svg width="1440" height="811" viewBox="0 0 1440 811" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M729.957 635.88C1307.52 647.087 1443.92 359.963 1439.92 0H0V811C2.6665 741.29 152.391 624.673 729.957 635.88Z" fill=""/>
<defs>
<linearGradient id="paint0_linear_558_16541" x1="1440" y1="374.355" x2="0.333518" y2="397.848" gradientUnits="userSpaceOnUse">
<stop stop-color="#11434E"/>
<stop offset="0.338542" stop-color="#0F5868"/>
<stop offset="1" stop-color="#16A1BD"/>
</linearGradient>
</defs>
</svg>

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".

_"The border that goes outside the div on the bottom left side."_ - **what border?** - I can't see any left-side border in your screenshot nor your posted snippet. — Dai, Sep 08 '22 at 13:30
_"The uneven spacing (padding) between the image and box on the right and bottom"_ - **what box** on the right? There is no box in your screenshot nor code.... — Dai, Sep 08 '22 at 13:30
The uneven spacing (padding) -> on the right side on the image you'll see some blue background color from the wrapper. The border that goes outside -> maybe i named it incorrectly but I mean that part on the left bottom side that sticks out of the element. — Dennis, Sep 09 '22 at 08:42
Explain that in your post please, not (just) in a comment. That fact that someone had to ask means your post [does not have all the details it should yet](/help/how-to-ask) and can do with an edit to clarify the particulars about the problem you're trying to solve. — Mike 'Pomax' Kamermans, Sep 11 '22 at 05:14
for you path to work probably , you need to apply some rules , hope this link can help you [link](https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive) — Arash Seifi, Sep 16 '22 at 19:28

Arash Seifi · Answer 1 · 2022-09-11T19:57:29.197

         #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);
    }

<header id="container">
    <div class="underContent">
        <svg width="0" height="0">
            <defs>
                <clipPath id="myClip" clipPathUnits="objectBoundingBox">
                    <path d="M 0 0 L 1 0 Q 1 0.8 0.6 0.7 Q 0 0.5 0 1" />
                </clipPath>
            </defs>
        </svg>
    </div>
    <div class="aboveContent">
        <div class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates libero incidunt facilis ex mollitia
            accusantium nobis 
        </div>
        <svg width="0" height="0">
            <defs>
                <clipPath id="myClip2" clipPathUnits="objectBoundingBox">
                    <path d="M 0 0 L 0.91 0 Q 1 0.8 0.5 0.68 Q 0 0.5 0 1" />
                </clipPath>
            </defs>
        </svg>
    </div>
</header>

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

Already thanks for your response. I've updated my question with the svg shape I want. So that shaped must be the clipping path. But when I paste that path into your example, the images isn't clipped anymore. — Dennis, Sep 16 '22 at 17:02

score 0 · Answer 2 · answered Sep 15 '22 at 12:24

0

I try to resolve your problem. you can check here

answered Sep 15 '22 at 12:24

MrPatel2021

163
8

score 0 · Answer 3 · answered Sep 17 '22 at 17:18

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;
}

<div class='hearder-container'>
   <svg class="header-svg" width="1818" height="962" viewBox="0 0 1818 962" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M950.5 548.443C360.621 606.34 72.7865 835.196 0 962H1818V0C1818 29 1815.08 37.0564 1810.5 55C1695.21 391.5 1573 513 1126.5 537L950.5 548.443Z" fill="white"/>
  <path d="M950.5 548.443C1004.91 543.103 1066.93 540.202 1126.5 537C1573 513 1695.21 391.5 1810.5 55C1744.57 204 1695.26 300.912 1568 396C1373.67 541.206 1101 529.795 950.5 548.443Z" fill="#888888"/>
  </svg>
</div>

Alright that's already closer to the result I want :-) But still two questions left for me: 1) How can I create my own path, because in the design the border on the bottom is more straight. 2) There's also a gradient over the image. So there are 3 layers: blue/green background, the image and the gradient. — Dennis, Sep 17 '22 at 18:33

Complex curved border header

3 Answers3