heading decorated

dabblet.css

/**
 * heading decorated
 */

html
{
	height: 100%;
	background: linear-gradient(
		to right bottom,
		yellow,
		red
	);
}

h1
{
	font-size: 1.25em;
	text-align: center;
	display: table;
	border-collapse: collapse;
}

h1::before,
h1::after
{
	content: "";
	display: table-cell;
	width: 50%;

	background-image: linear-gradient(
		to right,
		transparent 50%,
		black 50%
	);
	background-position: 0px 50%;
	background-size: 4px 1px;
	background-repeat: repeat-x;
}

h1::before
{
	border-right: solid 2em transparent;
}

h1::after
{
	border-left: solid 2em transparent;
}

dabblet.html

<h1>Heading, das auch noch ne runde größer wird</h1>

dabblet.js

// alert('Hello world!');

settings.json

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