css - 无法正确附加伪内容

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>

你能告诉我如何解决这个问题吗

标签： css

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>