Невозможно правильно добавить псевдоконтент

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 {
  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>

Answer 2

Вы на правильном пути.

Основная проблема состоит в том, что до и после должны получить абсолютную позицию, в то время как родительский контейнер, AKA контейнер .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.

Для этого 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>