Как в border поместить текст перевернутый на -90deg?

Question

Вот пример, как добиться такого результата?

Answer 1

Во всех нижеприведённых примерах используется один и тот же способ для поворота текста - 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>

Answer 2

Один из кучи вариантов

fieldset{
width:200px;
height:200px;
transform:rotate(-90deg);
}

<fieldset>
  <legend>Lorem ipsum dolor</legend>

</fieldset>

БЛОГ НА HUSL

Как в border поместить текст перевернутый на -90deg?

Ответы (2 шт):