圈子溢出容器

Question

我试图对附加的图像产生影响。带有 CSS border-radius的容器溢出的圆圈。它几乎就在那里，但还不对。

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

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

将<div>包裹在另一个内部，让我们称之为＆＃34;包装＆＃34;

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

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

现在您可以根据需要调整圆圈，宽度大于100％。要使圈子响应，请将border-radius: 50%，height: auto;和padding-top: 150%;＆lt; - 设为width。如果您将圈子移至margin-top: -120%;和margin-left: -25%;，我们会得到类似http://jsfiddle.net/qcfo5688/

的内容

Answer 2

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

logInBtn = driver.find_element(:css, ".button.orange-bg")

Answer 3

另一种方法是使用inline SVG。在以下示例中，我使用了带有arc command的路径元素：

＆＃13;

＆＃13;

request

＆＃13;

<title>
<%= (String)request.getAttribute("title") %>
</title>

＆＃13;

＆＃13;

＆＃13;

Answer 4

可能需要做一个特定的宽度，因为你需要在左边给它一个负余量来达到效果。例： 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;
}