​x
 
<!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>offset-position 属性</h1>
​
<div id="frameDiv">
  <div id="square1">1</div>
  <div id="square2">2</div>
  <div id="square3">3</div>
  <div id="square4">4</div>
  <div id="square5">5</div>    
</div>
​
</body>
</html>
​