我希望创建一个像下面的 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的值是通过试错赋值的,会随着父分区中文本的长度而变化。如果父级中包含的文本从 50 变为 5000,则上面指定的值将不起作用。
最佳答案
可以考虑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 属性,但它仍将是近似值。
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>
关于javascript - 如何使旋转元素高度为:100% of its parent?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54392048/