如何使用CSS製作一個圓圈並將其應用於我的標題？

Question

我一直在網上搜索了近2小時，試圖找到如何實現這一結果：

但我不希望使用的圖像。我試圖使用：after選擇器來實現該結果。

這是可能的。

我很抱歉，如果這已被問200x，但我找不到它。我發誓我搜查了。

Answer 1

你在使用：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; 
} 

然後讓它循環使用邊界半徑：

-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 2

我們打算使用border-radius屬性來實現僞元素。

基本上，如果您將圓整至至少其高度和寬度的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%); 
} 

，並會在你的頭的底部產生一個半圈（朝下）。

Answer 3

要在HTML中製作一個簡單的圓圈，請製作一個正方形div，應用50％的border-radius並且您將有一個圓圈。

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

而在你的CSS：

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

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

然後，將其放置，有很多種方法，簡單的一個是設置你的父母爲position: relative和使用絕對（position: absolute）定位在你的「圈子」上，把它放在中心。

編輯 Josh Burgess的回答顯示了定位它的好方法。