html - 在 div 中使用 ::after 时如何消除间隙？

Question

我想尝试一下::after，所以我制作了三个图形（正方形、圆形和三角形），然后将它们各自放在后面，并且可以很好地处理圆形和正方形，但是三角形会产生间隙，我不明白为什么，我尝试改变位置和显示属性，但它不起作用

.maincontainer {
  background-color: whitesmoke;
  border-radius: 1rem;
  width: 95%;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
}

.maincontainer div {
  margin: 10px;
  background-color: teal;
}

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

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

.triangulo {
  width: 0px;
  border-bottom: 100px solid yellow;
  border-left: 50px solid transparent;
  background-color: transparent !important;
  border-right: 50px solid transparent;
}

.triangulo::after {
  content: "Triangulo";
  position: fixed;
  top: 120px;
  left: 28.5%;
}

.cuadrado::after {
  content: "Cuadrado";
  position: fixed;
  top: 120px;
  left: 65px;
}

.circulo::after {
  content: "circulo";
  position: fixed;
  top: 120px;
  left: 195px;
}

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

标签： htmlcss

Answer 1

您可以通过将高度设置为 0px 来消除间隙

注意：我也设置了 left: 48% 只是为了让triangulo单词居中

.maincontainer {
  background-color: whitesmoke;
  border-radius: 1rem;
  width: 95%;
  min-height: 200px;
  margin: 0 auto;
  display: flex;
}

.maincontainer div {
  margin: 10px;
  background-color: teal;
}

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

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

.triangulo {
  width: 0px;
  height: 0px; /* << here */
  border-bottom: 100px solid yellow;
  border-left: 50px solid transparent;
  background-color: transparent !important;
  border-right: 50px solid transparent;
}

.triangulo::after {
  content: "Triangulo";
  position: fixed;
  top: 120px;
  left: 48%;
}

.cuadrado::after {
  content: "Cuadrado";
  position: fixed;
  top: 120px;
  left: 65px;
}

.circulo::after {
  content: "circulo";
  position: fixed;
  top: 120px;
  left: 195px;
}

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