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