How to add a half circle at the bottom middle of my header?


Tags: html,css,css3,shapes,css-shapes

Problem :

Here is how I want it to look:

header with half circle at bottom

I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.

fiddle is here http://jsfiddle.net/bU3QS/1/

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

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


Solution :

Use the :after pseudo element:

.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;
}

For this solution, overflow: hidden; has been removed from the .header CSS.

Here's a fiddle: http://jsfiddle.net/t97AX/

Here's another approach, that doesn't rely on the width of the semicircle to center it properly:

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

The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/

More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after


    CSS Howto..

    CSS : How to make two column right fluid left fluid depend on right

    How to Prevent Browsers from Caching CSS Files?

    How does reveal.js resize elements?

    How to add space between inline-block elements?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to manage custom CSS?

    How to add Bootstrap to Fullpage.js

    How can I allign select menu with a button on the same line with css bootstrap?

    How to do page load in jQuery?

    how to make this (table) using divs and css

    ASP.NET MVC2 + CSS - how to refresh CSS?

    Hiding and showing web element with CSS in dart?

    How do I pick an image from a set of images on my Ajax form?

    How to place 2 spans beside each other with full width with CSS

    How to position nav element center under parent div?

    How do I wrap a overflowed span in fixed div

    How to count total number of divs with in a div using CSS

    How to apply css class to uploaded image? [closed]

    How to find out and get rid of unused CSS code? [closed]

    show,hide DIV with mouseover , mouseout

    How to force divs into the same row when using Blueprint CSS

    How Do I Use Css To Select A Area Of Code

    How can I fix the footer to dynamically change with height of the grid sections as they increase?

    How to improve the rendering of my HTML/CSS button?

    How can I fill in the background behind text when I hover over it in a nav bar? [HTML/CSS]

    Coming from Android XML layouts, how to place web page elements in XHTML?

    How can we cache inline SVG in Browsers?

    How to achieve a lightbox effect with css only? Example available

    How can I get the second line of text to hide and show on hover? CSS only

    HTML CSS - How to render SQL nicely [closed]