45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
border-width: 50px 0 0 0;
|
|
margin: 10px;
|
|
width: 50px;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
background-color: gray;
|
|
border-image: url('resources/big-border-image.png') 30 70 60 40;
|
|
border-image-repeat: space;
|
|
}
|
|
|
|
.one {
|
|
width: 159px;
|
|
}
|
|
|
|
.two {
|
|
width: 239px;
|
|
}
|
|
|
|
.three {
|
|
width: 319px;
|
|
}
|
|
|
|
.vertical {
|
|
border-width: 0 50px 0 0;
|
|
width: 50px;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Clip to reveal the gaps between the spaced imges -->
|
|
<div class="horizontal" style="width: 159px; -webkit-clip-path: inset(0 120px 0 0)"></div>
|
|
<div class="horizontal" style="width: 239px; -webkit-clip-path: inset(0 110px 0 110px)"></div>
|
|
<div class="horizontal" style="width: 319px; -webkit-clip-path: inset(0 200px 0 100px)"></div>
|
|
|
|
<div class="vertical" style="height: 159px; -webkit-clip-path: inset(0 0 130px 0)"></div>
|
|
<div class="vertical" style="height: 239px; -webkit-clip-path: inset(112px 0 112px 0)"></div>
|
|
<div class="vertical" style="height: 319px; -webkit-clip-path: inset(102px 0 206px 0)"></div>
|
|
</body>
|
|
</html>
|