| <!DOCTYPE HTML> |
| |
| <html> |
| <head> |
| <style type="text/css"> |
| body { |
| margin: 0; |
| } |
| |
| div { |
| box-sizing: border-box; |
| } |
| |
| .container { |
| position: relative; |
| width: 800px; |
| height: 100px; |
| margin: 10px 0; |
| padding: 20px; |
| } |
| |
| .container div { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border: 1px solid black; |
| } |
| </style> |
| <script src="resources/border-radius-helpers.js"></script> |
| <script> |
| const borderWidth = 50; |
| |
| const corners = [ |
| 'top-left', |
| 'top-right', |
| 'bottom-left', |
| 'bottom-right' |
| ]; |
| |
| const clipPaths = [ |
| 'inset(10px 2px 60px 500px)', |
| 'inset(10px 500px 60px 2px)', |
| 'inset(60px 2px 10px 500px)', |
| 'inset(60px 500px 10px 20px)' |
| ]; |
| |
| var colors = [ |
| 'green', |
| 'red' |
| ]; |
| |
| var radii = '1178px 178px'; |
| |
| function doSetup() |
| { |
| for (var index in corners) |
| document.body.appendChild(createContainer(corners[index], colors, clipPaths[index], radii)); |
| } |
| |
| window.addEventListener('load', doSetup, false); |
| </script> |
| </head> |
| <body> |
| </body> |
| </html> |
