src/styles/global.scss

@@ -224,3 +224,25 @@ textarea {
     background-color: $light-red;
   }
 }
+
+@mixin raffle {
+  padding-bottom: 50px;
+  &::before, &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 25px;
+    height: 50px;
+    background: radial-gradient(closest-side, #fff, #fff 50%, transparent 50%);
+    background-size: 50px 50px;
+    background-position: 0 25px;
+    background-repeat: repeat-x;
+  }
+  &::after{
+    background: radial-gradient(closest-side, transparent, transparent 50%, #fff 50%);
+    background-size: 50px 50px;
+    background-position: 25px -25px;
+    bottom: -25px
+  }
+}

src/ui/TotalBought.vue

@@ -20,7 +20,7 @@
             '-ballot ballot-element-local'
         "
         :key="color.name"
-      >
+        >
         <p class="winner-chance">
           {{translate(color.name)}} vinnersjanse
         </p>
@@ -144,6 +144,7 @@ export default {
 <style lang="scss" scoped>
 @import "../styles/variables.scss";
 @import "../styles/media-queries.scss";
+@import "../styles/global.scss";
 
 @include mobile{
   section {
@@ -164,12 +165,15 @@ export default {
   .ballot-element-local {
     height: 250px;
     width: 100%;
-
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    @include raffle;
+    
     .win-percentage {
       margin-left: 30px;
       font-size: 50px;
     }
-    
 
     p {
       margin-left: 30px;