Open In App

CSS | Mustache

Improve
Improve
Like Article
Like
Save
Share
Report

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.




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

    
    

    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.




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

    
    

    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.




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

    
    

    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.




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

    
    

    Output:



Last Updated : 04 Dec, 2018
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads