JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<div class="container">
  
  <div class="row image-carousel__container chevron-carousel-rounded multiple-slides" data-sly-use.helper="image-carousel.js">
      <div class="col-xs-12 image-carousel__content">
          <div class="image-carousel__slider">
              <button class="arrow-previous">&lt;</button>
              
              <div class="image-slider slick-initialized slick-slider"><div class="slick-list draggable" style="height: 59px;"><div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);"><div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style=""><div><div class="item" data-index="1" style="width: 100%; display: inline-block;">
          <div class="item__image">
                
          
              
                <img class="img-responsive tablet-up-hidden" src="https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg">
                <img class="img-responsive tablet-up-hidden">
                
                <div class="triangle__top-right"></div>
                <div class="triangle__bottom-right"></div>
                <div class="triangle__bottom-corner"></div>
                </div>
          </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>

            <div class="">
            
            </div>


              <button class="arrow-next">&gt;</button>
          </div>
          <div class="image-carousel__dots-container"></div>
      </div>
  </div>
</div>

SCSS

/* here*/

/* _image-carosuel.scss DELETE ME */

.image-carousel {

    &__container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    &__content {
        padding-right: 0;
        padding-left: 0;
    }

    &__slider {
        position: relative;
        .item {

            &__image {
                position: relative;
                width: 100%;
                
                overflow: hidden;

                .triangle {

                  &__top-right{
                    position: absolute;
                    display: block;
                    height: 100%;
                    width: 100%;
                    background-color: white;
                    top: -66%;
                    right: -55%;
                    box-sizing: border-width;
                    transform: rotate(33deg);
                  }

                  &__bottom-right {
                    position: absolute;
                    display: block;
                    height: 100%;
                    width: 100%;
                    background-color: white;
                    bottom: -56%;
                    right: -58%;
                    box-sizing: border-width;
                    transform: rotate(-72deg);
                  }
                  
                  &__bottom-corner {
                    background-color: red; /* Change me */
                    width: 33.33%;
                    height: 33.33%;
                    transform: rotate(-38deg);
                    position: absolute;
                    bottom: -14%;
                    right: -12%;
                  }
                }

                .play-button__wrapper{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                img {
                    margin: 0 auto;
                    
                    /*temporary code */
                     width:...