如何在我的標題底部添加一個半圈？

header with half circle at bottom

我意識到這是一個醜陋的樣機，顯然，當我做真正的比例會更好看，但我想知道你將如何去用CSS做這件事。

<div class="header"> 
    </div> 

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: #000; 
    z-index: 10000; 
    height: 110px; 
    overflow: hidden; 
}

來源

2013-08-03 steveai

使用:after僞元素：

.header:after { 
    content: ''; 
    position: absolute; 
    background: black; 
    width: 50px; 
    height: 50px; 
    z-index: 1; 
    border-radius: 50%; /* Makes the element circular */ 
    bottom: -25px; 
    left: 50%; 
    margin-left: -25px; 
}

對於這個解決方案，overflow: hidden;已經從刪除CSS。

這裏有一個小提琴：http://jsfiddle.net/t97AX/

這裏的另一種方式，即不依賴於半圓的寬度適當居中：

.header:after { 
    content: ''; 
    position: relative; 
    top: 100%; 
    display: block; 
    margin: 0 auto; 
    background: red; 
    width: 50px; 
    height: 25px; 
    border-radius: 0 0 50px 50px; 
}

的小提琴（半圓形紅色爲清楚起見）：http://jsfiddle.net/x4mdC/

更多關於:before和:after：http://www.w3.org/TR/CSS2/selector.html#before-and-after

來源

2013-08-03 13:52:46

這樣，您不需要在標題內添加更多元素。 –

Upvote，因爲這是迄今爲止最優雅的解決方案，並且不需要額外的標記（此外，像這樣的文體項目不應該以標記開始）:) – Terry

使用'border-radius：50％;'只是爲了請確保何時編輯尺寸。 –

-1

<div class="header"> 
    <div class="circle"> 
    </div> 
    </div> 
.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: #000; 
    height: 110px; 
} 

.circle { 
    height: 100px; 
    width: 100px; 
    border-radius: 100px; 
    background-color: black; 
    margin: auto; 
    position: relative; 
    top:45px; 
}

在行動：http://jsfiddle.net/NickWilde/ngcce/

來源

2013-08-03 13:51:17

這不應該是答案，除非你需要與使用JavaScript圈互動。它不是內容，而是裝飾，應該使用'：after'僞元素。 –

如果是在我自己的網站上，我肯定會使用一個div，然後設置它的樣式，而不是使用'after'，這樣我就可以看到沒有進入樣式外部文件的原因，爲什麼heck會有一個圓圈。之後可能有它的用途，但我不喜歡那裏沒有一個相對明確的理由，而無需在文件之間來回切換。 –

您可以在大多數瀏覽器調試工具（F12）上看到僞元素 –

使用:after和border-radius來創建半圓。

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    background-color: #000; 
    height: 110px; 
    } 
.header:after { 
    content: ''; 
    background-color: red; 
    position: absolute; 
    display: block; 
    width: 100px; 
    top: 110px; 
    left: 50%; 
    margin-left: -50px; 
    height: 50px; 
    border-radius: 0 0 50px 50px; 
}

演示：http://jsfiddle.net/bU3QS/2/

來源

2013-08-03 13:56:44

如何在我的標題底部添加一個半圈？

回答

相關問題