58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
<style>
|
|
.box {
|
|
height: 100px;
|
|
width: 100px;
|
|
display: inline-block;
|
|
background-color: red;
|
|
}
|
|
.border-20 {
|
|
border: 20px solid;
|
|
}
|
|
.border-40 {
|
|
border: solid;
|
|
border-top: 0px;
|
|
border-right: 40px;
|
|
border-bottom: 40px;
|
|
border-left: 0px;
|
|
}
|
|
.no-border {
|
|
border: 0px none;
|
|
}
|
|
.border-image-100-intrinsic {
|
|
border-image: url('resources/svg-border-100x100-intrinsic.svg') 0 fill;
|
|
}
|
|
.border-image-100-intrinsic-slice {
|
|
border-image: url('resources/svg-border-100x100-intrinsic.svg') 20 fill;
|
|
}
|
|
.border-image-140-intrinsic {
|
|
border-image: url('resources/svg-border-140x140-intrinsic.svg') 0 fill;
|
|
}
|
|
.border-image-140-intrinsic-slice {
|
|
border-image: url('resources/svg-border-140x140-intrinsic.svg') 20 fill;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box no-border border-image-100-intrinsic"></div>
|
|
<div class="box border-20 border-image-100-intrinsic"></div>
|
|
<div class="box no-border border-image-100-intrinsic-slice"></div>
|
|
<div class="box border-20 border-image-100-intrinsic-slice"></div>
|
|
<br>
|
|
<div class="box no-border border-image-100-intrinsic"></div>
|
|
<div class="box border-20 border-image-100-intrinsic"></div>
|
|
<div class="box no-border border-image-100-intrinsic-slice"></div>
|
|
<div class="box border-20 border-image-140-intrinsic-slice"></div>
|
|
<br>
|
|
<div class="box no-border border-image-100-intrinsic"></div>
|
|
<div class="box border-20 border-image-100-intrinsic"></div>
|
|
<div class="box no-border border-image-100-intrinsic-slice"></div>
|
|
<div class="box border-20 border-image-140-intrinsic-slice"></div>
|
|
<br>
|
|
<div class="box no-border border-image-100-intrinsic"></div>
|
|
<div class="box border-20"></div>
|
|
<div class="box no-border border-image-100-intrinsic-slice"></div>
|
|
<div class="box border-40 border-image-100-intrinsic"></div>
|
|
</body>
|