How can I lower the left side of mustache? [closed]-CodePudding

enter image description herethis is my code:

.mastache {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: absolute;
  color: black;
  box-shadow: 
  150px 240px 0 0 currentColor,
  300px 240px 0 0 currentColor;
  margin: 20px;
  left: 30%;
}

.mastache::before {
  content: " " ;
  position: absolute;
  left: 30px;
  top: 120px;
  width: 210px;
  height: 120px;
  border-bottom: solid 180px currentcolor;
  border-radius: 0 0 0 100%;
  transform-origin: right 210px;
}

CodePudding user response：

Try with transform: rotateX(180deg):

.mastache {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: absolute;
  color: black;
  box-shadow: 150px 240px 0 0 currentColor, 300px 240px 0 0 currentColor;
  margin: 20px;
  left: 30%; 
}

.mastache::before {
  content: " " ;
  position: absolute;
  left: 30px;
  top: 120px;
  width: 210px;
  height: 120px;
  border-bottom: solid 180px currentcolor;
  border-radius: 0 0 0 100%;
  transform-origin: right 210px;
  transform: rotateX(180deg);
}

<div class="mastache"></div>