how to create UI like below in HTML-CodePudding

.leftside {
padding: 16px;
background-color: #0E1E2B;
border-bottom-left-radius: 50%;

I made a design for a website page and I want to add the background above in the header using HTML and CSS. in this same background I also added it right-side, here I'm adding the CSS code that I tried. I can not understand how to create a background like this!

CodePudding user response：

Use clip-path. This site generate some figures. Site link: https://bennettfeely.com/clippy/

CodePudding user response：

You can also do this by using pseudo elements and the border CSS property.

Example of the theory behind how this works here: How CSS triangles work

Codepen link: https://codepen.io/thechewy/pen/eYVMLGM

.leftside {
  width: 18rem;
  height: 10rem;
  background: red;
  position: relative;
}

/** triangle **/

.leftside:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  border-bottom: 10rem solid white;
  border-right: 100px solid transparent;
}

<div ></div>

CodePudding user response：

Here's what you may try or start with:

#shape {
  width: 200px;
  border-top: 120px solid #ec3504;
  border-left: 60px solid transparent;
}

<div id="shape"></div>

Alternative options would be to use javascript library or even do in Html 5 canvas.