From 7de3f614da25f4a14bb1ae88b49b0bed88e788df Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 25 Dec 2021 23:55:54 -0700
Subject: [PATCH] Add a Hexagon component

---
 web-svelte/src/components/Hexagon.svelte | 38 ++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 web-svelte/src/components/Hexagon.svelte

diff --git a/web-svelte/src/components/Hexagon.svelte b/web-svelte/src/components/Hexagon.svelte
new file mode 100644
index 0000000..3728b80
--- /dev/null
+++ b/web-svelte/src/components/Hexagon.svelte
@@ -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>
\ No newline at end of file