OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <style> |
| 3 div { |
| 4 border: 3px solid skyblue; |
| 5 width: 100px; |
| 6 height: 100px; |
| 7 background-image: linear-gradient(to right, coral, coral); |
| 8 background-size: 20px 20px; |
| 9 background-repeat: no-repeat; |
| 10 display: inline-block; |
| 11 } |
| 12 |
| 13 #top_left { background-position: left 20px top 20px; } |
| 14 #top_center { background-position: center top 20px; } |
| 15 #top_right { background-position: right 20px top 20px; } |
| 16 |
| 17 #cen_left { background-position: left 20px center; } |
| 18 #cen_center { background-position: center center; } |
| 19 #cen_right { background-position: right 20px center; } |
| 20 |
| 21 #bot_left { background-position: left 20px bottom 20px; } |
| 22 #bot_center { background-position: center bottom 20px; } |
| 23 #bot_right { background-position: right 20px bottom 20px; } |
| 24 |
| 25 </style> |
| 26 <div id="top_left"></div> |
| 27 <div id="top_center"></div> |
| 28 <div id="top_right"></div> |
| 29 <br> |
| 30 <div id="cen_left"></div> |
| 31 <div id="cen_center"></div> |
| 32 <div id="cen_right"></div> |
| 33 <br> |
| 34 <div id="bot_left"></div> |
| 35 <div id="bot_center"></div> |
| 36 <div id="bot_right"></div> |
OLD | NEW |