Invert Top Rounded Borders to Create Bowl Effect

Question

I have a div with rounded corners but I would like to invert these rounded corners to create a bowl effect.

Here is what I currently have:

html{
  background:red;
}

#test {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: blue;
}

<div id="test"></div>

So instead, I would like it to look like:

Is this even possible with CSS?

Update

If not already clear, the 'red' is meant to illustrate the rest of the body of the page and will need to be transparent

have border-bottom-radius to red container instead of blue.. — Mr_Green, Feb 05 '16 at 18:22
So what your saying is: you want a transparent bowl-like "cut-out"? — Krii, Feb 05 '16 at 18:28
the duplicate shows the opposite. did you look for something of that kind ? http://codepen.io/gc-nomade/pen/yeRMLZ — G-Cyrillus, Feb 05 '16 at 20:00

Krii · Answer 1 · 2016-02-05T18:24:56.630

1

Change top to bottom.

border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;

Edit:

See Fiddle then.

edited Feb 05 '16 at 18:24

answered Feb 05 '16 at 18:17

Krii

907
9
23

Sadly that is not what I am looking for... I am trying to 'punch' a bowl shape out of a div. This cannot be achieved by simply changing the border radius to border-bottom etc... – Ben Carey Feb 05 '16 at 18:18
Does the outer div *have* to be `html`? If not, make two `div`s with the same height. – Krii Feb 05 '16 at 18:20
eh??? What do you mean? – Ben Carey Feb 05 '16 at 18:21
`html {...}` you are selecting the html tag. – Krii Feb 05 '16 at 18:21
It should be pretty clear that the HTML is meant to represent the rest of the body of the page i.e. it will be transparent so adding a border-bottom radius to it will have absolutely no effect. – Ben Carey Feb 05 '16 at 18:23
Likewise: https://jsfiddle.net/xzbd9mL8/1/ – Ben Carey Feb 05 '16 at 18:25
@BenCarey i think he meant this : https://jsfiddle.net/xzbd9mL8/2/ no extra markup nor pseudos involved, the simpliest way ... – G-Cyrillus Feb 05 '16 at 19:29

score 1 · Answer 2 · answered Feb 05 '16 at 18:28

1

Create a pseudo element and rotate it by 180deg.

html {
  background: red;
}

#test {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: blue;
}

#test::before {
  content: "";
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: red;
  position: absolute;
  top: 0px;
  height: 100px;
  width: 100%;
  transform: rotate(180deg);
}

Working Fiddle

answered Feb 05 '16 at 18:28

Mr_Green

40,727
45
159
271

This is exactly the 'sort' of thing I was looking for, some clever way of manipulating the pseudo classes. However, there is on thing that makes this a few steps harder and that is the red is actually meant to be representing transparency. So actually, what I would like to do, is punch a bowl shape in the blue div. Is this even possible? – Ben Carey Feb 05 '16 at 18:30
@BenCarey AFAIK, there are all stupid tricks like I mentioned. I suggest you to go with SVGs instead. They are plain and straightforward. – Mr_Green Feb 05 '16 at 18:37
SVG is a great option. otherwise, making use of two elements, or a pseudo element is probably the best option. The spec does not really support what you are trying to do, so some hacky css backflips are going to be required. – Bosworth99 Feb 05 '16 at 22:36

Invert Top Rounded Borders to Create Bowl Effect

Update

2 Answers2