JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<ul>
  <li>‹</li>
   <li>›</li>
</ul>

CSS

ul {
  display: flex;
  font-size: 42px;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  background-color: #434242;
  border-radius: 16px;
  color: white;
  display: block;
  margin: 10px;
  padding: 12px 50px;
}

li:nth-child(1) {
  transform: perspective(300px) rotateY(-40deg);
  transform-origin: right bottom;
}

li:nth-child(2) {
  transform: perspective(300px) rotateY(40deg);
  transform-origin: left bottom;
}