<!DOCTYPE html>
<html>
<head>
<style>
#frameDiv {
width: 250px;
height: 150px;
border: 1px solid black;
margin: auto;
}
#square1 {
width: 65px;
height: 65px;
background: yellow;
offset-position: bottom right;
offset-path: ray(45deg);
}
#square2 {
width: 65px;
height: 65px;
background: pink;
offset-position: top right;
offset-path: ray(-25deg);
}
#square3 {
width: 65px;
height: 65px;
background: salmon;
offset-position: bottom left;
offset-path: ray(90deg);
}
</style>
</head>
<body>
<h1>The ray() function</h1>
<div id="frameDiv">
<div id="square1">ray(45deg)</div>
<div id="square2">ray(-25deg)</div>
<div id="square3">ray(0)</div>
</div>
</body>