[ehstadolnik]

I made the same mistake of using the chevron background in my client-approved design, so I put this hack together and it works pretty well:
CSS

.spb-row-container[data-top-style="slant-ltr"]:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #FFF;
  border-left: 683px solid transparent; /* overridden with JS */
  border-right: 683px solid transparent; /* overridden with JS */
  background: transparent;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
}

#main-container .spb-row-container[data-top-style="slant-ltr"]:before,
#main-container .spb-row-container[data-bottom-style="slant-ltr"]:after {
  background: transparent;
}

.spb_row_slant_spacer {
  height: 50px;
}

JS

    /* Chevron */
    function computeChevron() {
      var row = $('.spb-row-container[data-top-style="slant-ltr"]');
      var borderWidth = row.width() / 2 | 0; // calculate & trim decimals

      $('<style>.spb-row-container[data-top-style="slant-ltr"]:before{border-left-width: ' + borderWidth + 'px !important; border-right-width: ' + borderWidth + 'px !important;}</style>').appendTo('head');
    }
    computeChevron();

    $(window).on('resize', function(){
      computeChevron();
    });

[ehstadolnik]

Is there a reason the right-pointing arrow takes you to the previous product and the left-pointing arrow takes you to the next product, instead of the opposite, which is more intuitive?

Attachments:

You must be logged in to view attached files.