JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

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

CSS

div {
	border-top: .5em solid; /* Sets the thickness, also serves as fallback when no border-image */
	border-image: 100% 0 0 linear-gradient(90deg, #ff6600 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: #000000; /* change the color and notice that it adjusts */
}

p {
	border-top: .5em solid; /* Sets the thickness, also serves as fallback when no border-image */
	border-image: 30px; /* 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: #000000; /* change the color and notice that it adjusts */
}