CSS повернуть текст на n градусов, но не границу?

Question

Мне известно свойство CSS transform: rotate и методы, используемые для создания наклонного элемента div, но есть один очень важный элемент дизайна, который я нигде не могу найти:

Как сохранить граничную рамку под углом

Когда я создаю угловые элементы div, я использую элемент-оболочку, который поворачивается на n градусов, а затем дочерний элемент (часто span) это повернуто на -n градусов. К сожалению, это приводит к тому, что дочерний элемент имеет свою собственную границу прямоугольника angular, независимую от его родительского элемента.

Изображение ниже является очень c примером того, с чем, похоже, все в порядке, где текст дочернего элемента находится внутри прямоугольника без наклона, но это не то, что я хочу:

CSS повернутый текст за пределами родительской границы

.parent {
    width: 200px;
    height: 200px;
    transform: rotate(30deg);
    background-color: blue; /* for clarity in img */
}
.child {
    display: inline-block;
    transform: rotate(-30deg);
    background-color: rgba(250, 80, 80, 0.4); /* for clarity in img */
}

Стоит отметить, что дочерний элемент должен иметь display: inline-block, чтобы его можно было повернуть.

Вот примерно то, что я ищу:

                                  Some
                            text goes here
                       and automatically just-
                  ifies to the shape of the parent
              element which in this case hap-
         pens to be a rectangle. Here's
            more text to show the
                full shape..
                     --

Я пробовал использовать text-orientation, различные комбинации значений позиции и другие уловки с transform, но я не могу заставить текст вести себя так, как будто родительский элемент является его границей; вместо этого он просто создает свое собственное!

Я в порядке с решением JavaScript, но чистый CSS, безусловно, был бы хорош. Надеюсь, этой информации достаточно, чтобы квалифицированный специалист мог решить проблему.

Спасибо за ваше время!

Answer 1

Я думаю, что единственный способ приблизить это значение - это рассмотреть shape-outside, но было бы очень сложно получить правильные значения.

Ниже иллюстрации. Все, что вам нужно сделать, это обновить значения ширины / высоты для управления общей формой:

.container {
  display: flex;
  width: 400px;
  margin: 20px auto;
  text-align: justify;
}

.box>div {
  display: inline;
}

.box>div:before,
.box>div:after {
  content: "";
  float: left;
  shape-outside: linear-gradient(var(--d), #fff 49%, transparent 50%);
  background: linear-gradient(var(--d), transparent 49.5%, red 50% 51%, transparent 51.5%);
}

.box>div:after {
  float: right;
}

.box>div:first-child:before {
  --d: to bottom right;
  width: 60%;
  height: 120%;
}

.box>div:first-child:after {
  --d: to bottom left;
  width: 40%;
  height: 140%;
}

.box>div:last-child:before {
  --d: to top right;
  width: 40%;
  height: 140%;
}

.box>div:last-child:after {
  --d: to top left;
  width: 60%;
  height: 120%;
}

<div class="container">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

.container {
  --w: 60%;
  --h1: 110%;
  --h2: 130%;
  display: inline-flex;
  width: 300px;
  margin: 20px auto 200px;
  text-align: justify;
}

.box>div {
  display: inline;
}

.box>div:before,
.box>div:after {
  content: "";
  float: left;
  shape-outside: linear-gradient(var(--d), #fff 49%, transparent 50%);
  background: linear-gradient(var(--d), transparent 49.5%, red 50% 51%, transparent 51.5%);
}

.box>div:after {
  float: right;
}

.box>div:first-child:before,
.box>div:last-child:after {
  --d: to bottom right;
  width: var(--w);
  height: var(--h1);
}

.box>div:first-child:after,
.box>div:last-child:before {
  --d: to bottom left;
  width: calc(100% - var(--w));
  height: var(--h2);
}

.box>div:last-child:before {
  --d: to top right;
}

.box>div:last-child:after {
  --d: to top left;
}

<div class="container">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

<div class="container" style="--w:50%;--h1:120%;--h2:120%;">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

<div class="container" style="--w:30%;--h1:120%;--h2:120%;">
  <div class="box">
    <div></div>
    <div></div>
    Lor em ipsum dolor sit amet, consectetur adipiscing elit. Sed id dolor nisl. Curabitur efficitur imperdiet dui quis molestie. Sed interdum elit ut sem pharetra lacinia. Proin porta auctor risus ac tempus. Etiam mollis malesuada diam at ultrices. Cras
    vel congue nisl, non auctor lorem. Nam ac lobortis nulla.
  </div>
</div>

Note that the values are closely related to the text you are using. You will need a lot of trial and error to get the best values (I doubt there is a generic solution that work with any content ...)

Related question: Как обернуть текст вокруг фигуры с радиусом границы?

Answer 2

Единственный способ, которым я вижу, что это может быть достигнуто, - это комбинация skewx и упорядочивания слов, см. Фрагмент ниже.

#myDiv {
  transform: skewX(-50deg);
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  padding: 0px 10px;
}
#myDiv span {
  transform: skewX(50deg);
  display: inline-block;
}

<div id="myDiv">
<span>This</span> <span>amazing</span> <span>text</span> <span>will</span> <span>fit</span> <span>inside</span> <span>your</span> <span>container</span> <span>being</span> <span>inclined</span> <span>!</span>.
</div>

Разделение слов необходимо, так как каждое слово нужно расшивать одно за другим, а не весь дочерний элемент, если он есть в одном блоке.