Clever Geek Handbook

How can I create a circle using css and apply it to my title?

I've searched the web for the last 2 hours trying to find how to achieve this result:

enter image description here

But I don't want to use images. I tried to use: after selector to achieve this result.

Is it possible.

I'm sorry if this was asked 200x but I couldn't find it. I swear I was looking.

+3


source to share


3 answers


You are correct to use: after the pseudo class. My guess is that you may have forgotten to specify the attribute content: ''

.

So, first you need to create a block and place it at the bottom of the header:

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

Then make it circular with border-radius:



-webkit-border-radius: 44px;
   -moz-border-radius: 44px;
        border-radius: 44px;

Final code:

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;
}
+1


source


To make a simple circle in HTML, make a square div

, apply border-radius

50% and you have a circle.

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

And in your CSS:

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


Fiddle: http://jsfiddle.net/uw885d84/

Then there are many ways to position it, the simple one is to set the parent as position: relative

and use absolute ( position: absolute

) positioning on your "circle" to place it in the center.

Edit Josh Burgess's answer shows a good way to position it.

+1


source


We're going to use a property border-radius

to achieve this with pseudo-elements.

Basically if you concatenate the div to 50% of the height and width, you end up with a circle.

Then we'll position it absolutely in the center of the bottom header

and voila.

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

Also, if you have overlap issues, this will work as well:

header:after {
  height:40px;
  width:80px;
  border-radius: 0 0 90px 90px;
  background:blue;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

and will generate a semicircle (downward) at the bottom of your header.

0


source






More articles:


All Articles