圆圈溢出容器

Question

我正在尝试对附加的图像产生效果。边界半径为 CSS 的圆溢出容器。快到了，但还没到。

这个代码是我能得到的最近的代码。

body {
  margin: 0;
}
.bg-border-radius {
  margin: 0px;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 0 0 100% 100%;
  background-color: #0080C1;
}

<div class="bg-border-radius"></div>

如何使 CSS 更接近图像上的内容？

Answer 1

增加高度并使用负上边距：

.bg-border-radius {
  margin-top: -200px;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 0 0 100% 100%;
  background-color: #0080C1;
}

Answer 2

可能必须做一个特定的宽度，因为你需要在左边给它一个负边距才能达到效果。例子： https://jsfiddle.net/kLm6a7ym/

.bg-border-radius {
  margin-top: -200px;
  margin-left: -110px;
  width: 1385px;
  height: 400px;
  overflow: hidden;
  border-radius: 0 0 100% 100%;
  background-color: #0080C1;
}

Answer 3

将 <div> 包裹在另一个里面，我们称之为 "wrapper"

<div class="wrapper">
    <div class="bg-border-radius"></div>
</div>

.wrapper
{
    width: 100%;
    overflow: hidden;
}

现在你可以随意排列圆圈，宽度大于100%。要使圆响应，设置 border-radius: 50%、height: auto; 和 padding-top: 150%; <--与 width 相同。如果你把圆移到 margin-top: -120%; 和 margin-left: -25%; 你会得到这样的东西 http://jsfiddle.net/qcfo5688/

Answer 4

另一种方法是使用 inline SVG. In the following example, I used a path element with an arc command :

svg { width: 100%; height: auto;}

<svg viewbox="0 0 100 50">
  <path fill="#0081C2" d="M0 0 H100 V10 A85 85 1 0 1 0 10z" />
</svg>

圆圈溢出容器

circle overflowing the container

css

css-shapes