css arrow

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="test-arrow">Hello Plunker!</div>
  </body>

</html>

// Code goes here

/* Styles go here */

.test-arrow {
  height: 100px;
  width: 350px;
  background: blue;
  position: relative;
}

.test-arrow:before {
  content: '';
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  right: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid red;
}