| <!DOCTYPE html> |
| <meta name="viewport" content="width=device-width"> |
| <style> |
| a { |
| -webkit-clip-path: path("M 82 14 L 84 14 L 84 16 L 82 16 z"); |
| text-decoration: none; |
| } |
| img { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <script> |
| window.addEventListener("load", () => { |
| const canvas = document.createElement("canvas"); |
| canvas.width = 10; |
| canvas.height = 10; |
| const ctx = canvas.getContext("2d"); |
| const images = document.querySelectorAll("img"); |
| images.forEach(image => { |
| ctx.clearRect(0, 0, 10, 10); |
| const color = image.getAttribute("data-color"); |
| ctx.fillStyle = color; |
| ctx.fillRect(0, 0, 10, 10); |
| image.src = canvas.toDataURL(); |
| }); |
| }, false); |
| </script> |
| <a href="/" rel="ar"> |
| <img data-color="red"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="green"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="blue"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="cyan"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="#777777"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="rgba(255, 128, 0, 0.5)"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="white"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="black"> |
| </a> |
| <a href="/" rel="ar"> |
| <img data-color="rgba(0, 0, 0, 0.0)"> |
| </a> |
