3

I am trying to make the following design layout in css/html, but I can't get the inverted border-radius style encircled in blue (BOTTOM-LEFT).

enter image description here

So far, i am using the following css properties in my div:

  border-radius: 0 0 0 3rem;

The result is the following:

enter image description here

I have tried to make a margin-top:-3rem of the next div which works but destroys the div height structure for full screen ui and make me change all the weight percentages which is not elegant. Also, I found these tricks from stackoverflow but I don't know how can I get the result based on their code and also it's not simple at all.

Looking for suggestions and easy tricks to achieve this.

Programmer Man
  • 1,314
  • 1
  • 9
  • 29
  • Do u want the radius only on the bottom left? – Manikandan2811 Oct 11 '19 at 06:54
  • bottom left radius is border-radius: 0 0 0 3rem and it works, the thing is the TOP-LEFT inverted border is the one im asking – Programmer Man Oct 11 '19 at 06:57
  • sry.. i could'nt understand what u want exactly.. can u plz explain clearly? – Manikandan2811 Oct 11 '19 at 06:59
  • I think what's done there is a bottom left radius and the top div overlaps the one below it. Meaning you have to work smart with `position`, `z-index` and negative `top-margin` or `padding` – Dumisani Oct 11 '19 at 07:00
  • The screen-shot seems to be something else than what you are asking for. From here I'd say they just did apply a simple border-radius on the element that has a background-image, and made the one with the yellow background behind with z-index. Would such a solution be fine to you too? https://jsfiddle.net/yerf0h3p/ Or do you need the part at the top to be transparent? – Kaiido Oct 11 '19 at 07:18
  • Thanks Kaiido, yes this solution is easy but i thought there was a way to play with border-radius that's whay I asked here – Programmer Man Oct 11 '19 at 08:43

2 Answers2

2

Pardon the inline styling but you just need to work with position, z-index and negative margin-bottom

<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>
Dumisani
  • 2,988
  • 1
  • 29
  • 40
-3

if you want to make design like the example, just add padding to your div. And it will solve your problem.

Mfdsix Indo
  • 23
  • 8