zig Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
#frameDiv {
  width: 250px;
  height: 150px;
  border: 1px solid black;
}

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;  
  offset-position: top right;
  offset-path: ray(25deg);
}

#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;  
  offset-position: normal;
  offset-path: ray(45deg);
}

#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;  
  offset-position: auto;
  offset-path: ray(95deg);
}

#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}
</style>
</head>
<body>

<h1>The offset-position property</h1>

</body>

</html>