| <!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> |