Диагональная лента с текстом

Question

Нужно сделать такую форму и поместить внутрь текст который будет повернут паралельно к форме

Answer 1

<div class="wrapper">
  <img src="https://i.stack.imgur.com/CgpOx.png">
  <p>Text</p>
</div>



p{
  position: absolute;
  top: 15px;
  left: 47px;
  transform: rotate(45deg);
}

Answer 2

В CSS для такой фигуры можно использовать свойства clip-path. Текст выровнять через position: absolute; и разворот через transform: rotate(45deg);

Пример ниже

    .item { 
        clip-path: polygon(50% 0, 100% 50%, 100% 100%, 0 0);
        height: 380px;
        width: 380px;
        background: #ccc; 
        position: relative;
    }
    .item > p {
        position: absolute;
        left: 147px;
        bottom: 156px;
        transform: rotate(45deg);
        font-size: 60px;
    }

<div class="item">
    <p>Lorem</p>
</div>

Answer 3

section {
  overflow: hidden;
  aspect-ratio: 1;
  width: fit-content;
  display: flex;
}

div {
  margin: auto;
  padding: .5em 1em;
  line-height: 1em;
  transform-origin: bottom center;
  transform: translateY(-50%) rotate(45deg);
  position: relative;
  text-align: center;
}

div::before {
  content: "";
  position: absolute;
  inset: 0 -25%;
  background: silver;
  z-index: -1;
}

<section>
  <div>Текст</div>
</section>

<section>
  <div>Более длинный текст</div>
</section>

<section>
  <div>И даже<br>многострочный<br>текст</div>
</section>

<section>
  <div>С&nbsp;многострочным<br>надо<br>осторожнее...</div>
</section>

Для более старых браузеров (без aspect-ratio и fit-content):

section {
  overflow: hidden;
  display: inline-grid;
}

section::before {
  content: "";
  width: 100%;
  padding-top: 100%;
}

section::before, div {
  grid-column: 1;
  grid-row: 1;
}

div {
  margin: auto;
  padding: .5em 1em;
  line-height: 1em;
  transform-origin: bottom center;
  transform: translateY(-50%) rotate(45deg);
  position: relative;
  text-align: center;
}

div::before {
  content: "";
  position: absolute;
  left: -25%;
  top: 0;
  right: -25%;
  bottom: 0;
  background: silver;
  z-index: -1;
}

<section>
  <div>Текст</div>
</section>

<section>
  <div>Более длинный текст</div>
</section>

<section>
  <div>И даже<br>многострочный<br>текст</div>
</section>

<section>
  <div>С&nbsp;многострочным<br>надо<br>осторожнее...</div>
</section>

Для ещё более старых браузеров (без гридов и флексов, впрочем, при желании легко меняется на flex):

section {
  overflow: hidden;
  display: inline-block;
  text-align: center;
}

section::before, div {
  display: inline-block;
  vertical-align: middle;
}

section::before {
  content: "";
  padding-top: 100%;
}

div {
  padding: .5em 1em;
  line-height: 1em;
  transform-origin: bottom center;
  transform: translateY(-50%) rotate(45deg);
  position: relative;
}

div::before {
  content: "";
  position: absolute;
  left: -25%;
  top: 0;
  right: -25%;
  bottom: 0;
  background: silver;
  z-index: -1;
}

<section><div>Текст</div></section>

<section><div>Более длинный текст</div></section>

<section><div>И даже<br>многострочный<br>текст</div></section>

<section><div>С&nbsp;многострочным<br>надо<br>осторожнее...</div></section>

Ну уж без transform обойтись не получится :)

БЛОГ НА HUSL

Диагональная лента с текстом

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