How do I add negative radius to half circle?

Question

I want to do this:

So far I got this:

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #red;
  z-index: 10000;
  height: 10px;
  overflow: visible;
}

.header:after {
  content: '';
  position: relative;
  top: 100%;
  display: block;
  margin: 0 auto;
  background: red;
  width: 50px;
  height: 25px;
  border-radius: 10px 10px 50px 50px;
}

Codepen.

I can't get the top radius to go outwards the half circle like in the image.

How to do this with CSS?

user_17803626 · Answer

You cannot make a negative radius on a border.

There is the possibility to make an SVG path or radial gradient... I made a new div as circle and radial gradient on pseudo-elements. It's not perfect, but it will possibly show you the direction to solution :)

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: red;
  z-index: 10000;
  height: 10px;
  overflow: visible;
}

.header-circ {
  position: relative;
  top: 100%;
  display: block;
  margin: 0 auto;
  background: red;
  width: 500px;
  height: 250px;
  border-radius: 10px 10px 250px 250px;
}
.header-circ::before, .header-circ::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
   z-index: -1;

}
.header-circ::before {
    left:-94px;
    background: radial-gradient(circle at bottom left,  white 0%,white 75%,red 75%);
}
.header-circ::after {
    right:-94px;
    background: radial-gradient(circle at bottom right,  white 0%,white 75%,red 75%);

}

How do I add negative radius to half circle?

1 Answers