Implementing a slanted border between a top-right and bottom-left block

LESS CSS slanted border

@bottom-left-bg-color: #ff0000;
@top-right-bg-color: #0000ff;
@border-color: #cccccc;
@border-width: 5px;
@slant-angle: 15deg;
@slant-height: 10px;
@slant-anti-aliasing: 20%

@slant-width: tan(@slant-angle) * @slant-height;
@slant-hypotenuse: @slant-height / cos(@slant-angle);

@slant-border-angle: 0deg + atan(@slant-width / (@slant-height - @border-width));
@slant-border-width-percent: 100% * (sin(@slant-border-angle - @slant-angle) / (2 * sin(@slant-border-angle + @slant-angle)));
@slant-border-anti-aliasing: @slant-anti-aliasing * (@slant-border-width-percent / 100%);

// ...

:after {
	width: @slant-width;
	height: @slant-height + @border-width;

	content: '';
	position: absolute;
	top: -@border-width;
	right: -@slant-width/2;
	z-index: 10;

	background: linear-gradient(90deg - @slant-angle,
								@bottom-left-bg-color 0%,
								@bottom-left-bg-color (50% - @slant-border-width-percent),
								@border-color (50% - @slant-border-width-percent) + @slant-border-anti-aliasing,
								@border-color (50% + @slant-border-width-percent) - @slant-border-anti-aliasing,
								@top-right-bg-color (50% + @slant-border-width-percent),
								@top-right-bg-color 100%);
}