Как сверстать такую стрелку?

[yaparoff]

Скажите, как сверстать такую стрелку?

Подмечу, что угол здесь не прямой, как у квадрата, а больше похож на угол шестиугольника.
Размер стрелки: высота 40px, ширина 15px

[AlexZaw]

<div class="var1"></div>
<div class="var2"></div>
<div class="var3"></div>

.var1{
  position: relative;
  height: 40px;
  width: 15px;
  display: inline-block;
}
.var1:after, .var1:before{
  content: '';
  display: block;
  background: #000;
  position: absolute;
  height: 2px;
  width: 23px;
  transform-origin: 0 50%;
  top: 50%;
}
.var1:before{
  transform: rotate(-60deg);
}
.var1:after{
  transform: rotate(60deg);
}
.var2{
  display: inline-block;
  position: relative;
  height: 40px;
  width: 15px;
  overflow: hidden;
}
.var2:after{
  position: absolute;
  top: 50%;
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid #000;
  border-top: none;
  border-right: none;
  transform-origin: 0 100% ;
  transform: translateY(-100%) rotate(60deg) skew(30deg);
}
.var3{
  display: inline-block;
  height: 22px;
  width: 20px;
  border: 2px solid #000;
  border-top: none;
  border-right: none;
  transform:rotate(30deg) skewY(30deg)
}

 

[AlexZaw]

Можно сделать двумя линиями каждую под своим наклоном и спозиционировав их, а можно и квадратом сделать, просто наклонить его с помощью skew 

[Switch74]

http://jsfiddle.net/59j8af3d/

[yaparoff]

В 04.07.2018 в 12:28, Switch74 сказал:

http://jsfiddle.net/59j8af3d/

Задумка хорошая, но если изменить цвет бэкграунда, то стрелка станет не такой http://skrinshoter.ru/s/050718/HWdnmBMq?a
Мне нужно как то в не зависимости от бэкграунда

Edited July 5, 2018 by yaparoff