Текст HTML / CSS за углом DIV

Question

Итак, я собираюсь сделать один тег H1 для обхода контейнера. Если я использую вращение CSS, я могу поворачивать текст, но, очевидно, только на 90 градусов, а не вокруг деления. Я хочу сохранить текст в ОДНОМ теге H1, так как дизайнер хотел бы, чтобы это было заголовком страницы и для целей SEO.

Я не уверен, возможно ли это из всех исследований, которые я провел. Я немного озадачен. Я подумал, что вы, ребята / девочки, узнаете, возможно ли это вообще.

Например:

<h1>Latest News</h1>
<div>Blue Square</div>

Answer 1

• Позиция вашего ящика relative (с некоторым количеством margin места для смещения текста заголовка)
• Позиция вашего заголовка absolute с отрицательным верхом -1.1em
• Создайте <span> (внутри заголовка) для повернутого вертикального текста
• Поместите абсолютное значение SPAN справа 100% + 1.1em
• transform поверните вы ПРОШЕЛ на начало координат right top на -90deg

/*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{min-height:100%;font:14px/1.4 sans-serif;}

.box {
  position: relative;
  margin: 3em;
  width: 140px;
  height: 100px;
  background: #0bf;
}
.box h1 {
  position: absolute;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 2em; /* play only with this value. don't touch the rest! */
  top: -1.1em;
}
.box h1 span{
  position: absolute;
  top: 0.35em;
  right: calc(100% + 1.1em);
  transform-origin: right top;
  transform: rotate(-90deg);
}

<div class="box">
  <h1><span>Latest</span> News</h1>
</div>

<div class="box">
  <h1><span>Special</span> Offers!</h1>
</div>

<div class="box">
  <h1><span>Edge case with</span> some long text</h1>
</div>

Автоматически переносить <span> (на стороне сервера)

Если вы тянете заголовки неизвестной длины , т. Е.из CMS, я предлагаю вам разбить вашу строку пополам - со знанием слов! , чтобы определить слово в первой половине / с , которое необходимозавернутый в span

Пример использования PHP:

<?php

/**
 * Wrap first half of a sentence into <span>, word-aware! 
 */

function span_first_half($s) {
  $n = floor(strlen($s)/2);
  preg_match(("/.{{$n}}\\S*/"), $s, $a);
  $b = substr($s, strlen($a[0]));
  return "<span>$a[0]</span>$b";
}

PHP - используйте как:

<h1><?= span_first_half("Edge case with some long text") ?></h1>
<h1><?= span_first_half("This is cool!") ?></h1>

В результате:

<h1><span>Edge case with</span> some long text</h1>
<h1><span>This is</span> cool!</h1>

---

JavaScript - Используйте как

function span_first_half(s) {
  const n = Math.floor(s.length/2),
    a = s.match(RegExp(".{"+n+"}\\S*"))[0],
    b = s.substr(a.length);
  return `<span>${a}</span>${b}`;
}

console.log( span_first_half("Edge case with some long text") );
console.log( span_first_half("This is cool!") );

_{Вышеприведенные демонстрации адаптированы из этого примера JavaScript}

Answer 2

Я думаю, что этот способ может помочь вам

<div>
<h1>Latest News</h1>
Blue Square
</div>

но загруженное изображение не загружено, пожалуйста, попробуйте еще раз загрузить его и ответьте мне, чтобы я помог вам

Answer 3

Это можно сделать с помощью простых CSS-преобразований:

<style>
    * { margin: 0; padding: 0; }
    div.square { margin-left: 8em; width: 20em;
                 height: 20em; background-color: #08F; }
    h1 { margin-left: 2em; transform: translate(-3em);
         font-size: 400%;}
    h1 div { display: inline-block;
           transform: translate(1em,1em) rotate(-90deg); }
</style>
...
<h1><div>HEAD</div>ONE</h1>
<div class="square">Square</div>

Поисковые системы будут воспринимать h1 как текст "HEAD ONE".

Answer 4

То, что вы ищете, это svg элементы. Это совершенно другой мир кодирования, но работает как HTML. Я хотел бы предложить немного документации о SVG. CSS не предназначен для этих типов манипуляций.

Я создал пример: svg fiddle

HTML

<svg width="500" height="500">
  <path id="curve" d="M25,25   l125,0  0,125  -125,0  0,-125"
      style="stroke: #0D454A; fill: #0D454A;" />
  <text width="500px">
    <textPath alignment-baseline="top" xlink:href="#curve">
      This is a text example that's floating around this square
    </textPath>
  </text>
</svg>

Чтобы следовать тексту вокруг прямоугольника, вам нужно использовать <path> и <textPath>.