Creating arrows purely in CSS backgrounds

Question

I need to create a CSS class that can be added on the fly to various empty square div boxes that would add "half-width pointed lines" just like in the example below. Ideally, I could just add class="arrow_right" to a div and the proper line would show. Is this possible using only CSS? I'd prefer not to rely on static images to do this to allow for flexibility. Thanks!

Answer 1

Here is an idea using backgrounds:

.box {
  width:150px;
  height:150px;
  display:inline-block;
  border:2px solid;
}

.left {
  background:
    linear-gradient(135deg,transparent calc(15px*0.707),black calc(15px*0.707)) 100% calc(50% - 15px/2),
    linear-gradient( 45deg,transparent calc(15px*0.707),black calc(15px*0.707)) 100% calc(50% + 15px/2);
  background-size:50% 15px;
  background-repeat:no-repeat;
}

.right {
  background:
    linear-gradient(-135deg,transparent calc(15px*0.707),black calc(15px*0.707)) 0 calc(50% - 15px/2),
    linear-gradient( -45deg,transparent calc(15px*0.707),black calc(15px*0.707)) 0 calc(50% + 15px/2);
  background-size:50% 15px;
  background-repeat:no-repeat;
}

.top {
  background:
    linear-gradient( 135deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% - 15px/2) 100%,
    linear-gradient(-135deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% + 15px/2) 100%;
  background-size:15px 50%;
  background-repeat:no-repeat;
}
.bottom {
  background:
    linear-gradient( 45deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% - 15px/2) 0,
    linear-gradient(-45deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% + 15px/2) 0;
  background-size:15px 50%;
  background-repeat:no-repeat;
}

<div class="box left">

</div>
<div class="box right">

</div>
<div class="box top">

</div>
<div class="box bottom">

</div>

With CSS variable you can optimize the code:

.box {
  width:150px;
  height:150px;
  display:inline-block;
  border:2px solid;
}

.arrow {
  --s:15px;  /* Size */
  --c:black; /* Color */
  --g:transparent calc(var(--s)*0.707),var(--c) calc(var(--s)*0.707);
  
  background-image:linear-gradient(var(--a1),var(--g)),linear-gradient(var(--a2),var(--g));
  background-repeat:no-repeat;
}

.left {
  --a1:135deg;
  --a2:45deg;
  background-position: 100% calc(50% - var(--s)/2),  100% calc(50% + var(--s)/2);
  background-size:50% var(--s);
}

.right {
  --a1:-135deg;
  --a2:-45deg;
  background-position: 0 calc(50% - var(--s)/2),  0 calc(50% + var(--s)/2);
  background-size:50% var(--s);
}

.top {
  --a1:135deg;
  --a2:-135deg;
  background-position: calc(50% - var(--s)/2) 100%,  calc(50% + var(--s)/2) 100%;
  background-size:var(--s) 50%;
}
.bottom {
  --a1: 45deg;
  --a2:-45deg;
  background-position: calc(50% - var(--s)/2) 0,  calc(50% + var(--s)/2) 0;
  background-size:var(--s) 50%;
}

<div class="box arrow left">

</div>
<div class="box arrow right" style="--s:20px;--c:red">

</div>
<div class="box arrow top" style="--s:10px;--c:blue">

</div>
<div class="box arrow bottom"  style="--s:30px;--c:green">

</div>