09-gradients/linear-gradients-quadrant-top-right.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A gradient headed toward the top right</title>
<style type="text/css">
body {padding: 10em 5em;}
.radial {background-image: linear-gradient(
		to top right, #4097FF -25%, #FFBE00, #4097FF 125%
	);
	height: 200px; width: 500px;
	position: relative;
	}
div.gradline {
	background-color: black;
	position: absolute; top: 50%; left: 0;
	margin: -2px 0 0; height: 4px; width: 370px;
	transform: translateX(65px) rotate(-68.33deg);}
div.imagebox {border: 1px dotted red; position: relative;}

.gradline b {font: 1.25em Helvetica, sans-serif;}
b.pnt {display: inline-block; transform: rotate(68.33deg);}
b.st {position: absolute; top: 1.25em; left: -5%; width: 3em; text-align: center;}
b.label {position: absolute; top: 5px; left: 67%; width: 10em; margin-left: -5em; text-align: center;}
b.en {position: absolute; top: -10px; left: 101%;}

.gradline img {position: absolute; right: 0; top: -5px; height: 15px;}

div.line {position: absolute; height: 2px; width: 195px; transform: rotate(-90deg); top: 0; background: rgba(0,0,0,0.25);}
div.st.line {transform-origin: 0 50%; left: 0;}
div.en.line {transform-origin: 100% 50%; right: 0;}
div.perp.line {width: 538px; transform: translateX(-84px) rotate(90deg); background: rgba(0,0,0,0.5);}
</style>
 </head>
 <body>

<div class="radial" id="ex01">

<div class="gradline">
<b class="st pnt">starting point</b>
<div class="st line"></div>
<b class="label">gradient line</b>
<b class="en pnt">ending point</b>
<div class="en line"></div>
<div class="perp line"></div>
<img src="i/arrowhead.png">
</div>

</div>

</body>
</html>