Change implementation of div pointer.

app/assets/stylesheets/sqm_application.scss

@@ -7,7 +7,7 @@
 @import "dashboard";
 @import "navigation";
 @import "buttons";
-@import "scss/fontawesome.scss" ;
+@import "scss/fontawesome.scss";
 @import "scss/solid.scss";
 
 .height-56 {
@@ -25,7 +25,6 @@
 .subcategory-section {
   @extend .mt-5;
   @extend .bg-color-white;
-  @extend .p-7;
   box-shadow: 0 0 3px rgba($black, 0.25);
 }
 
@@ -57,34 +56,28 @@
   box-shadow: 0px -1px 0px $gray-2;
 }
 
-.arrow-up:before
+.arrow-container {
-{
-  content: "";
   position: relative;
-  top: -26px;
+  top: -50px;
-  left: 183px;
+  left: 220px;
-
-  border-width: 2.8em;
-  border-style: solid;
-
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-left-color: transparent;
-  border-bottom-color: $gray-2;
 }
 
-.arrow-up:after
+.arrow {
-{
+  background-color: $gray-3;
-  content: "";
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
-  position: relative;
+  width: 96px;
-  top: -24px;
+  height: 48px;
-  left: 90px;
+  position: absolute;
-
+  top: 2px;
-  border-width: 3em;
+  left: 1px;
-  border-style: solid;
+}
 
-  border-top-color: transparent;
+.arrow-shadow {
-  border-right-color: transparent;
+  background-color: $gray-2;
-  border-left-color: transparent;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
-  border-bottom-color: $gray-3;
+  width: 98px;
+  height: 50px;
+  position: absolute;
+  top: 0;
+  left: 0;
 }

app/views/sqm_categories/show.html.erb

@@ -15,6 +15,8 @@
 
 <% @category.subcategories.each do |subcategory| %>
   <section class="subcategory-section">
+    <div class="p-7">
+
     <h2 class="sub-header-2 font-bitter mb-7"><%= subcategory.name %></h2>
 
     <div class="d-flex justify-content-between align-items-end">
@@ -23,17 +25,21 @@
       </div>
       <h2 class="body-large mx-7"><%= subcategory.description %></h2>
     </div>
+    </div>
 
-    <div class="arrow-up mt-6"></div>
+    <div class="arrow-container mt-7">
+      <div class="arrow-shadow"></div>
+      <div class="arrow"></div>
+    </div>
 
-    <div class="measure-card d-flex px-7 pt-10 pb-7 mt-4 ">
+    <div class="measure-card d-flex justify-space-between p-7">
       <% subcategory.measure_presenters.each do |measure_presenter| %>
-        <div class="measure-presenter d-flex flex-column justify-content-between align-items-center px-5">
+        <div class="measure-presenter d-flex flex-column justify-content-between align-items-center mx-4">
           <h3 class="measure-description sub-header-4 mb-5 "><%= measure_presenter.name %></h3>
           <div>
             <%= render partial: "gauge_graph", locals: { gauge: measure_presenter.gauge_presenter, gauge_class: 'gauge-graph-sm', font_class: 'weight-700' } %>
           </div>
-          <p class="measure-description body-small mt-5 mb-4 "><%= measure_presenter.description %></p>
+          <p class="measure-description body-small mt-5 mb-4"><%= measure_presenter.description %></p>
         </div>
       <% end %>
     </div>