Create arrow without fill using CSS

Question

Creating a triangle using CSS is pretty easy and common practice, but is it possible to create a triangle in a similar way with a transparent background and just a border.

This is what I would like to create:

Given the way triangles are typically made, I dont really know where to start as they rely on pseudo elements and overlapping borders etc. This obviously cannot be done if the border is transparent...

Does anyone have any ideas of how to do this? Is it even possible?

Answer 1

Use transform:

div {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 10px;
  height: 10px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div:first-child {
  margin-bottom: 25px;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

<div></div>
<div></div>

Answer 2

You can use a pseudo-element to insert a character from this list:

• Countersink: ⌵ (U+2335)
• Latin capital letter v: V (U+0056)
• Latin small letter v: v (U+0076)
• Mathematical sans-serif capital v: 𝖵 (U+1d5b5)
• Mathematical sans-serif small v: 𝗏 (U+1d5cf)
• N-ary logical or: ⋁ (U+22c1)
• Roman numeral five: Ⅴ (U+2164)
• Small roman numeral five: ⅴ (U+2174)

div {
  display: inline-block;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 150%;
  padding: .75em;
}
div:after {
  content: '⌵';
  display: block;
  text-align: center;
  font-size: 125%;
}

<div>Scroll down</div>