使用CSS ::after伪元素为三角形添加内容时出现间隙该如何解决

问题原因 #

1. flex容器默认align-items: stretch属性会拉伸子元素高度，三角形div未设置明确高度，被拉伸到和父容器一致的高度，导致布局占位异常出现间隙。
2. 伪元素使用position: fixed是相对于视口定位，不同屏幕宽度下文字和图形错位，看起来有间隙。

修复代码 #

.maincontainer {
  background-color: whitesmoke;
  border-radius: 1rem;
  width: 95%;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start; /* 避免子元素被拉伸 */
}

.maincontainer div {
  margin: 10px;
  background-color: teal;
  position: relative; /* 作为伪元素的定位基准 */
}

.cuadrado {
  width: 100px;
  height: 100px;
}

.circulo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellowgreen !important;
}

.triangulo {
  width: 0px;
  height: 0; /* 明确高度为0，消除多余占位 */
  border-bottom: 100px solid yellow;
  border-left: 50px solid transparent;
  background-color: transparent !important;
  border-right: 50px solid transparent;
}

.triangulo::after {
  content: "Triangulo";
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%); /* 相对于自身水平居中，适配性更强 */
}

.cuadrado::after {
  content: "Cuadrado";
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
}

.circulo::after {
  content: "circulo";
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
}

<div class="maincontainer">
  <div class="cuadrado"></div>
  <div class="circulo"></div>
  <div class="triangulo"></div>
</div>

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