CODEWITHSUNDEEP
htmlbordergeometrycss
HartleySan
HartleySan

Reputation: 7810

How can I create an element in HTML/CSS with a semicircle border at the top?

I want to create an element in HTML/CSS like the following:

enter image description here

Basically, I want to create a semicircle in the top-middle with a border around it and then have a smaller circle within that semicircle with a single character centered within it (like the X in the image above). Also, within this element, there might be any amount of text/images, etc.

Any help on the best way to create this type of element would be greatly appreciated.

Thanks a lot in advance.

Upvotes: 1

Views: 5732

Answers (4)

scrblnrd3
scrblnrd3

Reputation: 7416

You can do it with this CSS

#circletop{
    width:100px;
    height:100px;
    border-top:1px solid black;
    border-top-left-radius:100px;
    border-top-right-radius:100px;
}

here's a Fiddle to demonstrate

Upvotes: 1

Danield
Danield

Reputation: 125473

The tricky part here was making the semi-circle on top. You just make the height half of the width and only set the first 2 values of the border-radius.

enter image description here

FIDDLE

Markup

<div class="outer">
    <div class="inner">X</div>
    Text here
</div>

CSS

.outer
{
    width: 300px;
    height: 100px;
    line-height: 100px;
    border: 1px solid black;
    background: lightBlue;
    position:relative;
    margin: 50px;

    font-size: 42px;
    text-align: center;

}
.outer:before
{
    content: '';
    width: 48px;
    height: 24px;
    position: absolute;
    left:0;right:0;
    top: -24px;
    z-index: -1;
    margin:auto;
    border-radius: 24px 24px 0 0;
    border: 1px solid black;
    background: lightBlue;
}
.inner
{
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    left:0;right:0;
    top: -22px;
    margin:auto;
    border-radius: 22px;
    border: 2px solid lightBlue;
    font-size: 32px;
    background: orange;
    text-align: center;
}

Upvotes: 3

Ant&#243;nio Almeida
Ant&#243;nio Almeida

Reputation: 10117

Here is an example with absolute positions and sizes:

EDIT:

Getting rid of the weird border effect on the circle:

http://jsfiddle.net/9JFpu/

It uses more css's and more html tags, but it solves the problem!
Note: the code is a bit messy, it could be beautified!

http://jsfiddle.net/D3tKE/

HTML:

<div class="mySuperFancyEffect">
    <div class="square"></div>
    <div class="circle">
        <div class="inner-circle"></div>
    </div>
</div>

CSS:

.mySuperFancyEffect {
    position: relative;
}

.mySuperFancyEffect .square {
    position: absolute;
    width: 180px;
    height: 65px;
    background-color: #66C;
    border: 1px solid #000;
    margin-top: 20px;
}

.mySuperFancyEffect .circle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #66C;
    border-top: 1px solid #000;
    margin-left: 70px;
}

.mySuperFancyEffect .inner-circle {
    width: 36px;
    height: 36px;
    border-radius: 20px;
    background-color: #DAA74C;
    margin: 2px;
}

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

You could try something like

#rectangle {
    display: block;
    position: relative;
    width: 50%;
    background: blue;
    }

#circle {
    display: inline-block;
    position: absolute;
    width: 5%;
    top: -2%;
    left: 48%;
    border-radius: 800px;
    background: orange;
    border: 2px solid blue;
}

Upvotes: 0

Related Questions