3
-
2эта рамка собрана обычным образом ..с текстом вместе - потом развёрнута на 90 градусов ..вся целиком – MaximLensky 21 окт '20 в 0:06
-
@MaximLensky: собрана? Да, человек для примера в paint-е нарисовал. Не думаю, что это дизайнерский изыск)) – UModeL 21 окт '20 в 4:20
-
@UModeL ну я думал что именно собрана - раз там таким образом расположены линии .... а использовать fieldset для этих целей не правильно но плюсик тебе и air я поставил – MaximLensky 21 окт '20 в 7:15
добавить комментарий
|
2 ответа
Один из кучи вариантов
fieldset{
width:200px;
height:200px;
transform:rotate(-90deg);
}
<fieldset>
<legend>Lorem ipsum dolor</legend>
</fieldset>
Во всех нижеприведённых примерах используется один и тот же способ для поворота текста - transform: rotate();
. Хотя реализации отличаются, всё они имеют существенный недостаток - это сложность в адаптации для "резиновой" вёрстки, так как размеры сильно зависят и влияют друг на друга.
- Первым делом, очевидно, напрашивается использование тегов
<fieldset>
и<legend>
:
body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background-color:rgb(255,255,255);background-image:radial-gradient(#fffc,#000),url(https://i.stack.imgur.com/m9NKc.png);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}
fieldset {
display: block;
height: 150px; width: 150px;
transform: rotate(-90deg);
padding: 0.5em 0.25em;
border: 4px solid red;
border-radius: 1em;
font: bold 20px Arial;
}
legend {
text-align: center;
color: red;
}
fieldset>div {
height: 100%; width: 100%;
margin: -0.7em 0;
transform: rotate(90deg);
}
p {
margin: 0;
font: normal 13px Arial;
text-align: justify;
}
<fieldset>
<legend>Text rotate</legend>
<div>
<p>Как в border поместить текст перевернутый на -90deg?</p>
</div>
</fieldset>
- Следующий вариант использует обычные
<div>
и псевдоэлементы:
body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background-color:rgb(255,255,255);background-image:radial-gradient(#fffc,#000),url(https://i.stack.imgur.com/m9NKc.png);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}
.fieldset {
position: relative;
display: block;
height: 150px; width: 145px;
margin: 5px auto;
border: 4px solid red;
border-left: none;
border-radius: 0 10px 10px 0;
font: bold 20px Arial;
}
.fieldset::before,
.fieldset::after {
content: '';
position: absolute;
right: calc(100% - 10px);
display: block;
height: 20px; width: 20px;
border: 4px solid red;
border-right: none;
}
.fieldset::before {
top: -4px;
border-bottom: none;
border-radius: 10px 0 0 0;
}
.fieldset::after {
bottom: -4px;
border-top: none;
border-radius: 0 0 0 10px;
}
.legend {
position: absolute;
top: 50%; left: -50%;
display: inline-block;
color: red;
transform-origin: 50% 50%;
transform: translatey(-50%) rotate(-90deg) translatey(50%);
}
p {
height: 100%; width: 100%;
margin: 0;
font: normal 13px Arial;
}
<div class="fieldset">
<div class="legend">Text rotate</div>
<p>Как в border поместить текст перевернутый на -90deg?</p>
</div>
- Ещё один способ - вместо
border
использоватьlinear-gradient
:
body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background-color:rgb(255,255,255);background-image:radial-gradient(#fffc,#000),url(https://i.stack.imgur.com/m9NKc.png);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}
.fieldset {
position: relative;
display: block;
height: 150px; width: 150px;
background-image: linear-gradient(to bottom, #f00f 4px, #f000 4px), linear-gradient(to left, #f00f 4px, #f000 4px), linear-gradient(to top, #f00f 4px, #f000 4px), linear-gradient(to bottom, #f00f 0%, #f00f 100%), linear-gradient(to top, #f00f 0%, #f00f 100%);
background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 100%;
background-size: auto auto, auto auto, auto auto, 4px 20px, 4px 20px;
background-repeat: no-repeat;
font: bold 20px Arial;
}
.legend {
position: absolute;
top: 50%; left: -50%;
display: inline-block;
transform-origin: 50% 50%;
transform: translatey(-50%) rotate(-90deg) translatey(110%);
color: red;
}
p {
margin: 0; padding: 10px 0px 10px 15px;
font: normal 13px Arial;
}
<div class="fieldset">
<div class="legend">Text rotate</div>
<p>Как в border поместить текст перевернутый на -90deg?</p>
</div>
- И напоследок напишем текст изначально вертикально с помощью
writing-mode
и после повернём:
body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background-color:rgb(255,255,255);background-image:radial-gradient(#fffc,#000),url(https://i.stack.imgur.com/m9NKc.png);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}
.fieldset {
position: relative; display: block;
height: 150px; width: 150px;
background-image: linear-gradient(to bottom, #f00f 4px, #f000 4px), linear-gradient(to left, #f00f 4px, #f000 4px), linear-gradient(to top, #f00f 4px, #f000 4px), linear-gradient(to bottom, #f00f 0%, #f00f 100%), linear-gradient(to top, #f00f 0%, #f00f 100%);
background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 100%;
background-size: auto auto, auto auto, auto auto, 4px 20px, 4px 20px;
background-repeat: no-repeat;
font: bold 20px Arial;
text-align: center;
vertical-align: middle;
}
.legend {
position: absolute;
display: block;
height: 100%;
transform-origin: 50% 50%;
transform: translatex(-50%) rotate(180deg);
writing-mode: tb-rl;
color: red;
}
p {
margin: 0; padding: 10px 5px 10px 15px;
font: normal 13px Arial;
text-align: left;
}
<div class="fieldset">
<div class="legend">Text rotate</div>
<p>Как в border поместить текст перевернутый на -90deg?</p>
</div>