Skip to content

Instantly share code, notes, and snippets.

@Hades32
Created January 10, 2024 15:12
Show Gist options
  • Save Hades32/b850056bb1f06c882938dc55cbcf1ea9 to your computer and use it in GitHub Desktop.
Save Hades32/b850056bb1f06c882938dc55cbcf1ea9 to your computer and use it in GitHub Desktop.
Fancy SVG box
<style>
html, body {
background-color: #121214;
color: wheat;
}
main {
display: flex;
flex-direction: column;
place-items: start;
}
.box {
border-image: url('Vector.svg');
/*
Whole SVG box
494x250
top left
104x86
bottom right
398x152
*/
border-image-slice: calc(86 / 250 * 100%) calc(398 / 494 * 100%) calc(152 / 250 * 100%) calc(104 / 494 * 100%);
border-image-width: 86px 398px 152px 104px;
font-size: 72px;
padding: 72px 92px;
color: #cf5211;
}
</style>
<main>
<h1>Test border thing</h1>
<div class="box">12:34:56</div>
</main>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment