HTML/CSS Text Around a Corner of a DIV – SEO

• Position your box relative (with some margin room for the offset heading text)
• Position your heading absolute with negative top -1.1em
• Create a <span> (inside the heading) for the rotated vertical text
• Position your SPAN absolute at right 100% + 1.1em
• transform rotate you SPAN on the origin right top by -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>

Wrap into <span> automatically (server-side)

If you’re pulling unknown length titles i.e. from a CMS, I suggest you split your string in half- word-aware! in order to determine the first-half word/s that need to be wrapped in span

Example using 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 – use like:

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

Will result in:

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

JavaScript – Use like

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!") );

_{The above demos are adapted from this JavaScript example}