SOURCE

function changeColor(obj) {
  if (obj.className === 'left-on') {
    obj.className = 'right-on'
  } else {
    obj.className = 'left-on'
  }
}

<div class="left-on" onclick="changeColor(this)">
  <div class="left">左边</div>
  <div class="right">右边</div>
<div>

.left-on,.right-on {
  font-size:0;
}
.left, .right {
  position:relative;
  display:inline-block;
  line-height: 20px;
  color: red;
  font-size: 14px;
}
.left {
  padding-left: 20px;
}
.right {
  padding: 0 20px;
}
.right::after {
  content:'';
  position:absolute;
  left:0;
  width: 0;
  top:0;
  right:0;
  border-top: 10px solid black;
  border-left: 10px solid black;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.left-on .left {
  background-color:white;
}
.left-on .right {
  background-color: black;
}
.left-on .right::after{
  border-color: white transparent transparent white;
}
.right-on .left {
  background-color:black;
}
.right-on .right {
  background-color: white;
}
.right-on .right::after{
  border-color: black transparent transparent black;
}