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.

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

Article Tags :

CSS

Web Technologies

CSS-Advanced