Question

我正在尝试复制这个模型：

enter image description here

我知道如何在CSS中创建半圆，但我不想要整个半圆。我只想要一个更大圆圈的顶部中心部分。

我专门寻找CSS代码在上面的模型中创建黑色圆圈。谢谢！

这是我的尝试：

<!DOCTYPE html>
<html>
    <head>
        <title>Landing Page</title>
        <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
    <body>
        <h1>
            <img id="logo" src="/images/logo.png">
        </h1>
        <div id="half_circle">
            <div id="footer_container">
                <div id="learn">
                    <a href="/about">Learn more.</a>
                </div>
                <div id="signin">
                    <div>
                        <a href="/login">Sign in to start callin'it</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>



  #half_circle {
    width: 100%;
    height: 50%;
    border-radius: 100% 100% 0 0;
    background-color: #111111;
    display: block;
    position: absolute;
    bottom: 0; 
  }

  #footer_container {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
  }

  #learn {
    text-align: center;
    padding-top: 3em;
  }

  #footer_container a {
    color:white;
  }

  #signin {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 10%;
    margin-right: auto;
    margin-left: auto;
  }

  #signin div {
    text-align: center;
  }

Answer 1

只需制作一个大圆圈并隐藏它：）

演示：http://jsfiddle.net/Ye35w/1/

body {
  overflow: hidden;
}

.circle {
  position: absolute;
  top: 65%;
  left: -25%;
  display: block;
  width: 150%;
  height: 150%;
  background-color: #ccc;
  border-radius: 50%;
}

顶部，较大圆圈的中心部分

1 个答案: