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:
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
Post a Comment