jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="container mt-3 mb-3">
  <div class="row">
    <div class="col col-4 poly-1">
      <div class="row justify-content-center">
        <div class="col col-8 mt-3 mb-3">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique nulla non gravida laoreet. Fusce rutrum, ligula eget laoreet posuere, orci nulla lobortis odio, facilisis molestie nisl massa ut urna.
        </div>
      </div>
    </div>
    <div class="col col-4 poly-2">
      <div class="row justify-content-center">
        <div class="col col-8 mt-3 mb-3">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique nulla non gravida laoreet. Fusce rutrum, ligula eget laoreet posuere, orci nulla lobortis odio, facilisis molestie nisl massa ut urna.
        </div>
      </div>
    </div>
    <div class="col col-4 poly-3">
      <div class="row justify-content-center">
        <div class="col col-8 mt-3 mb-3">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique nulla non gravida laoreet. Fusce rutrum, ligula eget laoreet posuere, orci nulla lobortis odio, facilisis molestie nisl massa ut urna.
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.col-4 {
  overflow-y: visible;
  /*background-color: red;*/
}

.poly-1:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20%;
  background-color: #ededed;
  border-radius: 5px;
  clip-path: polygon(10% 0%, 90% 0%, 70% 100%, 10% 100%);
  width: 140%;
  height: 100%;
  z-index: -1;
}

.poly-2:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20%;
  background-color: #ededed;
  border-radius: 5px;
  clip-path: polygon(30% 0%, 90% 0%, 70% 100%, 10% 100%);
  width: 140%;
  height: 100%;
  z-index: -1;
}

.poly-3:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20%;
  background-color: #cd2122;
  border-radius: 5px;
  clip-path: polygon(30% 0%, 90% 0%, 90% 100%, 10% 100%);
  width: 140%;
  height: 100%;
  z-index: -1;
}