css arrow right

this is pure css arrow

by Mr_Vasu

HTML

<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora error adipisci asperiores quis laboriosam inventore, dolore qui pariatur, incidunt esse sunt eius, explicabo recusandae? Consequuntur, delectus eveniet nulla obcaecati omnis.
</div>
<div class="parent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora error adipisci asperiores quis laboriosam inventore, dolore qui pariatur, incidunt esse sunt eius, explicabo recusandae? Consequuntur, delectus eveniet nulla obcaecati omnis.
</div>

SCSS

.parent {
  width: 200px;
  height: auto;
  display: table-cell;
  position: relative;
  background: green;
  &::before {
    content: "";
    position: absolute;
    border-top: 10px solid transparent;
    border-left: 15px solid green;
    border-bottom: 10px solid transparent;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index:99;
  }
  &:nth-child(2n){
    background: red;
    &::before{
      content:"";
      border:none;
    }
  }
}