Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak the hexagon component to use the SVG background image

Browse source
This commit is contained in:
Oliver Akins 2022-07-19 22:54:13 -06:00
parent 6f7477eecf
commit 378e4315ba
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
1 changed files with 6 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web-svelte/src/components/Hexagon.svelte
View file

@ -4,35 +4,14 @@
<style lang="scss"> <style lang="scss">
.hexagon { .hexagon {
position: relative; height: 100%;
width: 100px; width: 100%;
height: 57.74px; background-image: url(/assets/hexagon.svg);
background-color: #000000; background-repeat: no-repeat;
margin: 28.87px 0; background-position: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} color: white;
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #000000;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 28.87px solid #000000;
z-index: -1;
} }
</style> </style>