html - 如何将负半径添加到半圆？

Question

我想这样做:

到目前为止我得到了这个:

.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;
}

<div class="header"></div>

Codepen .

我无法像图片中那样让顶部半径向外延伸到半圆。

如何使用 CSS 做到这一点？

Answer 1

您不能在边框上制作负半径。

可以制作 SVG 路径或 radial gradient ...我在伪元素上制作了一个新的 div 作为圆形和径向渐变。它并不完美，但它可能会告诉你解决问题的方向:)

.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%);

}

<div class="header"></div>
<div class="header-circ"></div>