如何使用css创建一个圆圈并将其应用到我的标题？

Question

我一直在网上搜索过去2小时，试图找到如何实现这个结果：

但我不想使用图片。我试图使用：after选择器来实现这个结果。

是否可能。

我很抱歉，如果这被问到200x，但我找不到它。我发誓我搜查了。

Answer 1

要在HTML中制作简单的圆圈，请制作正方形div，应用50％的border-radius并且您将拥有一个圆圈。

<div class="circle"></div>

在你的CSS中：

.circle{
    width: 200px;
    height: 200px;       
    border-radius: 50%;
}

小提琴：http://jsfiddle.net/uw885d84/

然后，要放置它，有很多方法，一个简单的方法是将您的父级设置为position: relative并在您的＆＃34;圆圈＆＃34;上使用绝对（position: absolute）定位。把它放在中心。

编辑 Josh Burgess＆＃39;答案显示了定位它的好方法。

Answer 2

使用：after伪类后你是正确的。我的假设是您可能忘记指定content: ''属性。

首先，您需要创建一个块并将其放置在标题的底部：

header { position: relative; }
header:after {
    content: '';
    display: block;
    height: 44px;
    margin-left: -22px;
    position: absolute;
        left: 50%;
        bottom: -22px; // Pull it out to half of its size for the semi-circle look
    width: 44px;
}

然后使用border-radius：

使其圆形

-webkit-border-radius: 44px;
   -moz-border-radius: 44px;
        border-radius: 44px;

---

最终代码：

header:after {
    content: '';
    display: block;
    height: 44px;
    margin-left: -22px;
    position: absolute;
        left: 50%;
        bottom: -22px; // Pull it out to half of its size for the semi-circle look
    width: 44px;

    -webkit-border-radius: 44px;
       -moz-border-radius: 44px;
            border-radius: 44px;
}

Answer 3

我们将使用border-radius属性来实现伪元素。

基本上，如果你将div舍入至少其高度和宽度的50％，你就得到一个圆圈。

然后，我们将它绝对放在header的底部中心，然后瞧。

header {
 position: relative;
}
header:after {
 content: '';
 border-radius: 40px;
 height: 80px;
 width: 80px;
 position: absolute;
 left: 50%;
 top: 100%;
 transform: translate(-50%, -50%);
 background-color: blue;
}

或者，如果您遇到重叠问题，这也会有效：

header:after {
  height:40px;
  width:80px;
  border-radius: 0 0 90px 90px;
  background:blue;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
} 

并在标题的底部生成一个半圆（向下）。