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

Я надеюсь создать такую коробку

enter image description here

используя следующие правила css, но я получаю это

enter image description here

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

можете ли вы сообщить мне, как исправить это

+2
источник поделиться
4 ответа

Вы хотите выровнять оба ваших треугольника (после, раньше) на основе вашего .box.

Для этого box должно быть position:relative и ваше position:absolute треугольников 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>
+3
источник

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

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

Я думаю, что подход делает трюк. Вы можете настроить точные значения. .container имеет :before псевдоэлементом, который повернут квадратом с границами. margin-bottom: -3px перемещает его, поэтому он придерживается rotate(45deg) border-top, так как rotate(45deg) его в position: absolute; bottom: 100% 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>
+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>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос