.pointer-right {
  width: 40px;
  height: 100px;
  position: relative;
  background: lightgray;
}

.pointer-right:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 15px solid rgb(247, 247, 247);
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

.pointer-right:before {
  content: "";
  position: absolute;
  right: -15px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 15px solid lightgray;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

.pointer-right:hover {
  background: darkgray;
}

.pointer-right:hover:before {
  border-left: 15px solid darkgray;
}

.pointer-left {
  width: 40px;
  height: 100px;
  position: relative;
  left: 15px;
  background: lightgray;
}

.pointer-left:after {
  content: "";
  position: absolute;
  left: -15px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 15px solid lightgray;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

.pointer-left:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 15px solid rgb(247, 247, 247);
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

.pointer-left:hover {
  background: darkgray;
}

.pointer-left:hover:after {
  border-right: 15px solid darkgray;
}

.triangle-down {
  width: 400px;
  height: 0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 40px solid lightgray;
}