Use css to create a custom arrow shape [duplicate]

Answer 1

Simplest solution would be svg.

html, body {
  background: url(http://lorempixel.com/400/200/sports/) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
svg {
  position: relative;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

---

You could easily create complex arrow shapes.

html, body {
  background: teal;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

---

Making it even more complex by adding some quadratic bezier curves.

html,
body {
  background: teal;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

---