Как сделать: после элемента с шириной, точно равной высоте родительского элемента, а затем повернуть его на -90 градусов?

Question

Я хочу создать разделение с рамкой, как показано ниже: PNG

Я планировал создать элемент :: after со следующими размерами:

width=height of the parent division;
height=1.5em;

Следующий код работает нормально, но ширина элемента :: after неправильная ...

body {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: "Dosis", sans-serif;
}

.side-text {
  position: relative;
  font-size: 4em;
  color: #eee;
  background: none;
  padding: 0.4em 0.5em 0.4em 0.3em;
  border: 5px solid #eee
}

.side-text::after {
  position: absolute;
  content: "Points Needed";
  font-size: 0.25em;
  color: #222;
  background: #eee;
  text-align: center;
  width: 100%;
  /*This takes the value of 100%(Parent's Width) but we need 100%(Parents Height)*/
  transform: rotate(-90deg);
  left: 45%;
  top: 42.5%;
  /*The values of left, top have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>

Значения left-margin, top-margin были назначены методом trial & error и будут меняться в зависимости от длины текста в родительском разделении.Если текст, содержащийся в родительском элементе, изменится на 5000 с 50, указанные выше значения не будут работать.

Answer 1

Можно считать writing-mode

body {
  display: flex;
  flex-direction: column;
  min-height: 93vh;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: "Dosis", sans-serif;
}

.side-text {
  position: relative;
  font-size: 4em;
  color: #eee;
  background: none;
  padding: 0.4em 0.5em 0.4em 0.3em;
  border: 5px solid #eee;
  margin:5px;
}

.side-text::after {
  position: absolute;
  content: "Points Needed";
  font-size: 0.25em;
  color: #222;
  background: #eee;
  text-align: center;
  transform: rotate(-180deg);
  right: 0;
  top: -1px;
  bottom: -1px;
  writing-mode: vertical-lr;
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>
<div class="side-text">
  5000
</div>

---

Вы можете упростить аппроксимацию, настроив transform-origin, а затем просто измените левое свойство, но оно останется приближением.

body {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: "Dosis", sans-serif;
}

.side-text {
  position: relative;
  font-size: 4em;
  color: #eee;
  background: none;
  padding: 0.4em 0.5em 0.4em 0.3em;
  border: 5px solid #eee
}

.side-text::after {
  position: absolute;
  content: "Points Needed";
  font-size: 0.25em;
  color: #222;
  background: #eee;
  text-align: center;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
  right: 0px;
  left: -15px; /*adjust this*/
  top: 0;
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>

Другая идея состоит в том, чтобы отделить контент от фона.Мы сохраняем фон внутри элемента, и нам просто нужно поместить текст по центру справа, и не нужно беспокоиться о его ширине.

Это будет работать во всех случаях, и вы, вероятно, получите лучшую поддержку, чем writing-mode:

body {
  display: flex;
  flex-direction: column;
  min-height: 93vh;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: "Dosis", sans-serif;
}

.side-text {
  position: relative;
  font-size: 4em;
  color: #eee;
  background: none;
  padding: 0.4em 0.5em 0.4em 0.3em;
  border: 5px solid #eee;
  background: linear-gradient(#eee, #eee) right/20px 100% no-repeat;
  margin:5px;
}

.side-text::after {
  position: absolute;
  content: "Points Needed";
  font-size: 0.25em;
  color: #222;
  text-align: center;
  top: 50%;
  right: 0;
  transform: translate(41%, -50%) rotate(-90deg);
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>
<div class="side-text">
  5000
</div>

Answer 2

Вы не учитывали заполнение родительского элемента, которое необходимо добавить обратно. Это можно сделать с помощью функции CSS calc().Это решение все еще немного статично.

body {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  font-family: "Dosis", sans-serif;
}

.side-text {
  position: relative;
  font-size: 4em;
  color: #eee;
  background: none;
  padding: 0.4em 0.5em 0.4em 0.3em;
  border: 5px solid #eee
}

.side-text::after {
  position: absolute;
  content: "Points Needed";
  font-size: 0.25em;
  color: #222;
  background: #eee;
  text-align: center;
  
  /* Add back the top/bottom padding of the parent (plus .1em for rounding) */
  width: calc(100% + .9em);
  
  transform: rotate(-90deg);
  left: 39%;
  top: 42.1%;
  /*The values of left, top have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
  50
</div>