Как создать подложку на ::before?

Question

[Zombie42679]

Есть пример https://codepen.io/anon/pen/gxevqJ , нужно, чтоб сверху была стрелка, а снизу голубой фон. Знаю что через z-index: -1, можно сделать, но какие есть еще способы ? Потому мне с z-index: -1 не подходит, не понимаю почему, но у меня на сайте не работает и картинка остается под ::before . Да и html желательно не менять.

Answer 1

[Ivan Bogachev]

Немного поправил ваш код:

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  display: block;
  width:  650px;
  height: 600px;
  background: blue;
}

.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top:  0;
  left: 0;
  width:  600px;
  height: 400px;
  background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
}