dabblet.css

/**
 * Border clipping with border-image
 * Support: Chrome, Opera, Safari, Firefox. Cannot get it to work in IE11, even though it supports border-image…
 * Note: In CSS Backgrounds & Borders 4, there will be a property to clip borders (likely called border-clip). Until then though…
 * Author: Lea Verou
 */

div {
	border-top: .2em solid; /* Sets the thickness, also serves as fallback when no border-image */
	border-image: 100% 0 0 linear-gradient(90deg, currentColor 5em, transparent 0); /* 5em is the width of clipped border */
	
	/* After this point, it’s just styling that’s not related to the effect. Yup, it’s only the 2 lines above! */
	padding: 1em;
	background: #ffe; /* to show that the border is actually clipped */
	color: navy; /* change the color and notice that it adjusts */
}

dabblet.html

<div>I could be a footnote now, with my cool clipped top border</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}