heading with inline rounded corners

dabblet.css

/**
 * heading with inline rounded corners
 */

h1
{
	background: orange;
	padding: 0 1em;
	border-radius: 1em 0 0 0;
	overflow: hidden;
	position: relative;
}

h1 > span[role="presentation"]
{
	position: absolute;
	width: 100%;
	background: white;

}

h1 > span[role="presentation"]::before
{
	content: "\A0";
	background: orange;
	border-radius: 0 0 1em 0;
	width: 1em;
	position: absolute;
}

dabblet.html

<h1>Das ist eine Überschrift, die bei schmalen Browserfenstern auch mehrzeilig werden kann
<span role="presentation">&nbsp;</span>
</h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}