diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index bb93db96..60b0255c 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -30,25 +30,14 @@
 				border-top-left-radius: 0;
 				border-bottom-left-radius: 0;
 
-				&::before,
-				&::after {
+				&::before {
 					content: "";
 					position: absolute;
 					left: -4px;
-					width: 0;
-					height: 0;
-					border-style: solid;
-					border-color: var(--button-background-color) var(--button-background-color) var(--button-background-color) transparent;
-				}
-
-				&::before {
-					top: 0;
-					border-width: 24px 0 0 8px;
-				}
-
-				&::after {
-					bottom: 0;
-					border-width: 0 0 24px 8px;
+					width: 8px;
+					height: 100%;
+					background: var(--button-background-color);
+					clip-path: polygon(8px -1px, 0 -1px, 4px 12px, 0 25px, 8px 25px);
 				}
 			}
 
@@ -59,13 +48,11 @@
 				&::after {
 					content: "";
 					position: absolute;
-					top: 0;
 					right: -4px;
-					width: 0;
-					height: 0;
-					border-style: solid;
-					border-width: 12px 0 12px 4px;
-					border-color: transparent transparent transparent var(--button-background-color);
+					width: 8px;
+					height: 100%;
+					background: var(--button-background-color);
+					clip-path: polygon(0 -1px, 4px -1px, 8px 12px, 4px 25px, 0 25px);
 				}
 			}