Here's an example to get you started
<?php
function svgHead($txt)
{
$svg = "<svg class='longhead' width='150' height='100'>
<style type='text/css'>
.headtext {
font-size: 11pt;
fill: orange;
}
</style>
<path d='M 0 100 l 40 0 l 100 -100 l -40 0 Z' fill='black' />
<text x='35' y='95' class='headtext' transform='rotate(-45, 35, 95 )'>$txt</text>
</svg>
";
return $svg;
}
?>
<style type='text/css'>
div.outer {
border: 1px solid black;
height: 105px;
}
svg.longhead {
margin: -50px;
position: relative;
top: 35px;
left: 50px;
}
</style>
<div class='outer'>
<?= svgHead('Long Heading 1')?>
<?= svgHead('Long Heading 2')?>
<?= svgHead('Long Heading 3')?>
<?= svgHead('Long Heading 4')?>
<?= svgHead('Long Heading 5')?>
<?= svgHead('Long Heading 6')?>
</div>
output