<!DOCTYPE html>
<html>
<head>
<style>
.arrow {
  width: 0;
  height: 0;
  margin: 10px;
}
.left, .right{
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
}
.up, .down{
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
}
.right { border-left: 61px solid purple; }
.left { border-right: 61px solid purple; }
.up { border-bottom: 61px solid purple; }
.down { border-top: 61px solid purple; }
</style>
<script>
if (window.testRunner) testRunner.dumpAsText(true);
</script>
</head>
<body>
  <div class="arrow right"></div>
  <div class="arrow left"></div>
  <div class="arrow up"></div>
  <div class="arrow down"></div>
</body>
</html>