-1

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

在此处输入图像描述

我知道如何在 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;
  }
4

1 回答 1

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%;
}
于 2013-03-04T00:20:06.493 回答