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

Add a Hexagon component

Browse source
This commit is contained in:
Oliver-Akins 2021-12-25 23:55:54 -07:00
parent 72db6ae4d0
commit 7de3f614da
1 changed files with 38 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

38
web-svelte/src/components/Hexagon.svelte Normal file
View file

@ -0,0 +1,38 @@
<div class="hexagon">
<slot></slot>
</div>
<style lang="scss">
.hexagon {
position: relative;
width: 100px;
height: 57.74px;
background-color: #000000;
margin: 28.87px 0;
display: flex;
justify-content: center;
align-items: center;
}
.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>