How can I design a curved header background with css? [duplicate]

I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this:

enter image description here Does someone have an idea perhaps how it could be achieved?

.curved {    margin: 0 auto;    height: 400px;    background: lightblue;    border-radius:0 0 200px 200px;  }
<div class="container">    <div class="curved"></div>  </div>

Professor Asked on October 18, 2020 in Android langue.
Add Comment
2 Answer(s)

    Simply use border-radius and rely on some overflow. You can also consider pseudo element to avoid extra markup:

    .container {    margin: 0 auto;    width: 500px;    height: 200px;    background: lightblue;    position: relative;    overflow: hidden;  }    .container:after {    content: "";    position: absolute;    height: 80px;    left: -10%;    right: -10%;    border-radius: 50%;    bottom: -25px;    background: #fff;  }
    <div class="container">  </div>


    You can also use radial-gradient if you want a transparent shape:

    body {    background: pink;  }    .container {    margin: 0 auto;    width: 500px;    height: 200px;    background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);  }
    <div class="container">  </div>

    CSS curve bottom transparent background


    And here is another way using clip-path

    .container {    margin: 0 auto;    width: 500px;    height: 200px;    background-color: lightblue;    position: relative;    overflow: hidden;  }    .container:after {    content: "";    position: absolute;    bottom: 0;    right: -5%;    left: -5%;    height: 120px;    background: #fff;    -webkit-clip-path: ellipse(50% 60% at 50% 100%);    clip-path: ellipse(50% 60% at 50% 100%);  }
    <div class="container">  </div>

    You can also consider SVG:

    .container {    margin: 0 auto;    width: 500px;    height: 200px;    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='48' fill='lightblue'><path d='M0 0 L0 16 C16 6 48 6 64 16 L64 0 Z' /></svg>") top center/auto 700px no-repeat;  }
    <div class="container">  </div>


    Here is an example if you want also to add border around your shape:

    .container {    margin: 0 auto;    width: 500px;    height: 200px;    border: 2px solid #000;    border-bottom: 0;    background: lightblue;    position: relative;    overflow: hidden;  }    .container:after {    content: "";    position: absolute;    height: 80px;    left: -10%;    right: -10%;    border-radius: 50%;    bottom: -62px;    background: #fff;    z-index: 2;  }    .container:before {    content: "";    position: absolute;    height: 82px;    left: -10%;    right: -10%;    border-radius: 50%;    bottom: -62px;    background: #000;    z-index: 1;  }
    <div class="container">  </div>

    CSS curve with border


    If you want to have an image or gradient as background with the transparency, use mask-image:

    body {    background: pink;  }    .container {    margin: 0 auto;    width: 500px;    height: 200px;    -webkit-mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);            mask-image: radial-gradient(110% 50% at bottom, transparent 50%, #fff 51%);    background: linear-gradient(45deg,red,yellow,blue);  }
    <div class="container">  </div>

    CSS bottom curve with gradient

    Professor Answered on October 18, 2020.
    Add Comment

      Check this. I created this with :after pseudo element. It can be helpful if the background is solid color.

      .curved {    margin: 0 auto;    width: 300px;    height: 300px;    background: lightblue;    position: relative;  }  .curved:after{    background: white;    position: absolute;    content: "";    left:0;    right:0;    bottom: -25px;    height: 50px;    border-radius: 50% 50% 0 0;  }
      <div class="container">    <div class="curved"></div>  </div>

      Professor Answered on October 18, 2020.
      Add Comment

      Your Answer

      By posting your answer, you agree to the privacy policy and terms of service.