css shapes - How can I make a circle using css and apply it to my header? -


i have been searching web past 2 hours trying find how achieve result:

enter image description here

but don't want use images. trying use :after selector achieve result.

is possible.

i'm sorry if has been asked 200x , couldn't find it. swear searched.

you're correct in using :after pseudo-class. assumption possibly forgot specify content: '' attribute.

so first, you're going want create block , position @ bottom of header:

header { position: relative; } header:after {     content: '';     display: block;     height: 44px;     margin-left: -22px;     position: absolute;         left: 50%;         bottom: -22px; // pull out half of size semi-circle     width: 44px; } 

then make circular using 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 out half of size semi-circle     width: 44px;      -webkit-border-radius: 44px;        -moz-border-radius: 44px;             border-radius: 44px; } 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -