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><metacharset="UTF-8"><title>mustache</title><metaname="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><divclass="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><metacharset="UTF-8"><title>mustache</title><metaname="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><divclass="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><metacharset="UTF-8"><title>mustache</title><metaname="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><divclass="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><metacharset="UTF-8"><title>mustache</title><metaname="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><divclass="mustache"></div></body></html>Output:
Please Login to comment...