CSS | Mustache

Problem Statement: Create a mustache using CSS.

    Steps to create Mustache:

  • Step 1:
    • Create a circle of black color with radius 50%, width and height of 180px.
    • To keep the circle in the middle add 350px to its left.
    • Also to make the circle visible add a background color as current color.
    • The benefit of currentColor is to change the color logo so that the background gets changed automatically.
    • The HTML coding will be done to add the div class in the body.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <meta charset="UTF-8">
        <title>mustache</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .mustache {
                width:180px;
                height:180px;
                left:350px;
                border-radius:50%;
                position:absolute;
                color:black;
                background-color:currentColor;
            }
           </style>
           </head>
           <body>
                 <div class = "mustache"></div>
           </body>
           </html>

    chevron_right

    
    

    Output:

  • Step 2:
    • Add the box shadow to have two circles in the middle of the page.
    • The dimensions of the shadow will be 150px 2410px 0 0 currentcolor.
    • Above dimensions are x offset, y offset, spread, blur and color.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <meta charset="UTF-8">
        <title>mustache</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .mustache {
                width:180px;
                height:180px;
                left:350px;
                border-radius:50%;
                position:absolute;
                color:black;
                background-color:currentColor;
                            box-shadow:
                150px 240px 0 0 currentColor,
                300px 240px 0 0 currentColor;
            }
           </style>
           </head>
           <body>
                 <div class = "mustache"></div>
           </body>
           </html>

    chevron_right

    
    

    Output:

  • Step 3:
    • Now, no need of earlier circle, the only need is its shadow. So, delete the original circle.
    • Add the before element to the div and add the position, top, width, height, border.
    • Also add the border-radius till where the arc needs to go to form the mustache.
    • Fix the rotation origin so that the end of the left mustache comes accurately and then rotate it at an angle of -40 degrees.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <meta charset="UTF-8">
        <title>mustache</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .mustache{
                width:180px;
                height:180px;
                left:350px;
                border-radius:50%;
                position:absolute;
                color:black;
                box-shadow:
                150px 240px 0 0 currentColor,
                300px 240px 0 0 currentColor;
            }
                    .mustache::before{
                content:"";
                position:absolute;
                left:30px;
                top:120px;
                width:210px;
                height:120px;
                border-bottom:solid 180px currentColor;
                border-radius:0 0 0 100%;
                transform:rotate(-40deg);
                transform-origin:right 210px;
            }
           </style>
           </head>
           <body>
                 <div class="mustache"></div>
           </body>
           </html>

    chevron_right

    
    

    Output:

  • Step 4:
    • Now the left mustache is ready so add the after element to the div.
    • Add the position, top, width, height, border as done in the before element.
    • Also add the border radius till where the arc needs to go to form the mustache.
    • Fix the rotation origin so that the end of the right mustache also comes accurately and then rotate it at an angle of 40 degrees.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
    <head>
        <meta charset="UTF-8">
        <title>mustache</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .mustache{
                width:180px;
                height:180px;
                left:350px;
                border-radius:50%;
                position:absolute;
                color:black;
                box-shadow:
                150px 240px 0 0 currentColor,
                300px 240px 0 0 currentColor;
            }
            .mustache::before{
                content:"";
                position:absolute;
                left:30px;
                top:120px;
                width:210px;
                height:120px;
                border-bottom:solid 180px currentColor;
                border-radius:0 0 0 100%;
                transform:rotate(-40deg);
                transform-origin:right 210px;
            }
            .mustache::after{
                content:"";
                position:absolute;
                left:390px;
                top:120px;
                width:210px;
                height:120px;
                border-bottom:solid 180px currentColor;
                border-radius:0 0 100%0;
                transform:rotate(40deg);
                transform-origin:left 210px;
            }
        </style>
    </head>
    <body>
        <div class="mustache"></div>
    </body>
    </html>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

I like to do coding in C++C and java programming languages HTML and CSS always intersts me Sharing knowleged is the best way according to me to increase ones knwoledge

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.