如何制作：在宽度正好等于父元素高度的元素之后，然后将它旋转-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>

左边距，上边距的值已通过反复试验分配，并将随父分部中文本的长度而变化。如果父级中包含的文本从50更改为5000，则上面指定的值将不起作用。

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>