如何降低CSS绘制的胡子左侧位置？附相关实现代码

你绘制的左侧胡子由.mastache::before伪元素实现，要降低它的位置，按以下方式调整即可：

• 方法1：调整top属性值
  伪元素的top属性控制它距离父元素顶部的偏移量，数值越大位置越靠下。你可以把原来的top:120px调大，比如改为top:150px，就能直接把左侧胡子整体下移。如果调整后水平位置不符合预期，可以同步修改left属性的数值，数值越大越靠右。
• 方法2：使用transform偏移
  如果不想改动原有定位参数，可以给伪元素新增transform: translateY(30px)规则，translateY的参数为正数时向下偏移，数值越大下移距离越多，这种方式不会影响其他元素的布局定位。

调整后的示例代码（以修改top属性为例）：

.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: 150px; /* 由原120px调整为150px，下移30px */
  width: 210px;
  height: 120px;
  border-bottom: solid 180px currentcolor;
  border-radius: 0 0 0 100%;
  transform-origin: right 210px;
}

如果调整后胡子形状衔接不自然，可以同步微调border-bottom的宽度或者transform-origin的参数即可。

内容的提问来源于stack exchange，提问作者farnia01