如何使旋转后的元素高度达到其父元素的100％? [英] How to make a rotated element height:100% of its parent?

问题描述

我正在寻找一个像下面的PNG那样的带有边框的分区

I am looking to create a division with border like the following PNG

我计划制作具有以下尺寸的:: after元素:

I have planned to make an ::after element with the following dimensions:

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

下面的代码工作正常，但:: after元素的宽度不正确...

The following is the code works fine but the width of the ::after element is not right...

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，则上面指定的值将不起作用.

The values of left-margin, top-margin 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 from 50, the values specified above won't work.

推荐答案

您可以考虑 书写模式

You can consider 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 然后更简单地更改left属性，从而使其更容易近似，但是它将保持近似值.

You can make it easier to approximate by adjusting transform-origin and then simply change the left property but it will remain an approximation.

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>

另一个想法是将内容与背景分开.我们将背景保留在元素内，我们只需要将文本居中放在右侧，而无需理会其宽度.

Another idea is to separate the content from the background. We keep the background inside the element and we simply need to put the text centered on the right and no need to bother about its width.

这将在所有情况下都有效，并且您可能会比 writing-mode 提供更好的支持:

This will work in all the cases and you will probably have better support than 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>

这篇关于如何使旋转后的元素高度达到其父元素的100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！