无法正确添加伪内容

Question

我希望创建一个像这样的盒子

使用以下CSS规则，但我得到了

.box {
  width: 50px;
  color: #303030;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.box::after {
  content: "";
  border-color: #FFF transparent;
  border-style: solid;
  border-width: 0 7px 7px;
  margin-top: -5px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

.box::before {
  content: "";
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

请让我知道如何解决此问题

Answer 1

您想要的是根据.box对齐两个三角形（前后）。

为此，box必须具有position:relative和三角形position:absolute

一旦发现这个问题，就可以使用以下框根据框的位置对齐三角形：

• 顶部
• 左
• 底部
• 对

为了更好地理解，top:0和left:0将位于框的左上角。

希望这会有所帮助：）

.box {
  width: 50px;
  color: #303030;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
}

.box::after {
  content: "";
  border-color: #FFF transparent;
  border-style: solid;
  border-width: 0 7px 7px;
  margin-top: -5px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: -2px;
  left: 16px;
}

.box::before {
  content: "";
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  top: -10px;
  left: 15px;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

Answer 2

您在正确的轨道上。

主要问题是，前后应该获得绝对位置，而父容器（也就是.box容器）应该具有相对或绝对位置。

注意：在将绝对位置应用于前后之后，我对before和after进行了一些细微调整，将其设置为您所需要的图像已发布

.box {
  width: 50px;
  color: #303030;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
}

.box::after {
  position: absolute;
  content: "";
  border-color: #fff transparent;
  border-style: solid;
  border-width: 0 6px 6px;
  width: 1px;
  top: -5px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

.box::before {
  position: absolute;
  content: "";
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  top: -8px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

Answer 3

我认为以下方法可以解决问题。您可以调整精确值。 .container具有:before个伪元素，该伪元素旋转成带边框的正方形。 margin-bottom: -3px移动它，因此它粘在border-top上，因为rotate(45deg)弄乱了position: absolute ; bottom: 100%。

.container {
  position: relative;
  width: 50px;
  background: #FFF;
  border: 2px solid #56B665;
}

.container::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0) rotate(45deg);
  content: "";
  border-top: 2px solid #56B665;
  border-left: 2px solid #56B665;
  background: #FFFFFF;
  height: 8px;
  width: 8px;
  margin-bottom: -3px;
  display: block;
}

.box {
  text-align: center;
  width: 100%;
  color: #303030;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>

Answer 4

在下面的代码中签出：我还添加了另一个变体来实现相同的目的，这更简洁。

.box {
  width: 50px;
  color: #303030;
  position:relative;
  background: #FFF;
  border: 2px solid #56B665;
  padding: 8px 3px 9px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.box::after {
  content: "";
  border-color: #FFF transparent;
  border-style: solid;
  border-width: 0 7px 7px;
  margin-top: -39px;
  width: 1px;
  margin-left: auto;
  margin-bottom: 35px;
  margin-right: auto;
  display: block;
  position: relative;
}

.box::before {
  content: "";
  top: -16px;
  border-color: #56B665 transparent;
  border-style: solid;
  border-width: 0 8px 8px;
  width: 1px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: relative;
}


.arrow_box {
	position: relative;
	background: #FFF;
	border: 4px solid #56B665;
  padding: 10px;
  text-align: center;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #FFF;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #56B665;
	border-width: 36px;
	margin-left: -36px;
}

<div class="container" style="padding:20px">
  <div class="box">100</div>
</div>
<br />


<!-- Another Variation -->
<div class="container">
  <div class="arrow_box">100</div>
</div>