CSS only button arrows

dabblet.css

/**
 * CSS only button arrows
 */

ul {
  border: 2px solid red;
}
ul:after {
  content: '.';
  clear: both;
}
li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0 20px
}
li:before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 10px;
  border-top: 20px solid red;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

li:after {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 13px;
  border-top: 17px solid white;
  border-right: 17px solid transparent;
  border-left: 17px solid transparent;
}

dabblet.html

<ul>
  <li>button 1</li>
  <li>button 2</li>
  <li>button 3</li>
</ul>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}