DIV角落周围的HTML / CSS文本

Question

所以，我正在寻找单个H1标签绕过一个容器。如果我使用CSS旋转，我可以旋转文本，但显然只有90度，而不是div。我希望将文本保留在ONE H1标签中，因为设计师希望将其作为页面标题和SEO目的。

我不确定这是否可能来自我所做的所有研究。我有点难过。我想你们/ gals会知道这是否可能。

例如：

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

Answer 1

• 定位你的盒子relative（有一些margin空间用于偏移标题文本）
• 定位你的标题absolute与负顶部-1.1em
• 为旋转的垂直文本创建一个<span>（在标题内）
• 将您的SPAN绝对定位在正确的100% + 1.1em
• transform通过right top旋转你在原点-90deg上的SPAN

/*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>

Wrap into <span> automatically (server-side)

如果您从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!") );

以上演示改编自this JavaScript example

Answer 2

您正在寻找的是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>。

Answer 3

我想这种方式可以帮到你

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

但是您上传的图片未加载，请再试一次上传，并回复我，我会帮助您

Answer 4

它可以通过简单的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”文本。