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

    How to transform a button into this styled button

    How can I center a tooltip below an element that is narrower than the tooltip?

    How do I correctly fromat this div's contents?

    How to remove line break after DIV in CSS

    How do I get this div to be positioned below this search form?

    how to add embedded ruby in style tag

    How to draw a circle sector in CSS?

    How to enlarge footer on mobile only?

    How can I improve this mobile site? [closed]

    How to inherit CSS Menu on each html page linked on Homepage without using any javascript and templates

    How do I keep my exiting CSS from compiled LESS

    CSS: How to remove enter from HTML?

    How to make gutter between columns in a CSS grid system

    How to delete white space between two div element when they display as inline-block [duplicate]

    How to make a smoother animation with jQuery UI slide effect

    How to make the element located in the center of a div?

    How much media queries?

    hide show div using nav html5 query javascript

    How to reduce the indentation between first and second line inside circle?

    How to use Custom Fonts using CSS?

    CSS InfoBox over all elements how to place? [closed]

    How to start a css animation from current position

    How to target html area maps with css

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to cover piece of border with element over it?

    How do I keep a CSS hover rule applied when the mouse moves to the child element?

    PHP Header Include (nav bar) not showing up [closed]

    How to addClass() at RANDOM to an element in jQuery?

    How to prevent table row from re-sizing when hidden text is displayed?

    How to set two divs side by side