Create arrow without fill using CSS - html

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>

Answer 3

Use Font-awesome, chevron-down
.blk {
width: 150px;
height: 60px;
background-color: black;
}
.blk .fa {
color: white;
margin: 40px 50% auto 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="blk">
<i class="fa fa-chevron-down"></i>
</div>

Answer 4

A solution with pseudo-elements. Appliable to any kind of element.
.class:before {
content: "";
width: 15px;
height: 3px;
background-color: black;
display: inline-block;
transform: rotate(45deg);
}
.class:after {
content: "";
width: 15px;
height: 3px;
background-color: black;
display: inline-block;
transform: rotate(-45deg);
margin-left: -7px;
}

Answer 5

body{background:#000;color:#fff;font: 16px/1 sans-serif;}
h2{text-align:center;}
.arrowDown{
position:relative;
}
.arrowDown:after{
content: "";
position:absolute;
left: 50%;
bottom: -16px;
width: 16px;
height: 16px;
margin-left: -8px; /* (16/2) */
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: rotate(45deg);
}
<h2 class="arrowDown">Scroll down</h2>

Answer 6

Another alternative could be to use SVG to create the shape.
.scroll_down {
box-sizing: border-box;
width: 150px;
height: 90px;
background: black;
padding: 5px;
text-align: center;
}
.scroll_down p {
font-family: sans-serif;
color: white;
}
<div class="scroll_down">
<p>Scroll Down</p>
<svg width="20px" height="10px" viewBox="0 0 20 10">
<path fill="none" stroke-width="2" stroke="white" d="M1,1 L10,9 L19,1"></path>
</svg>
</div>
It's well supported and relatively easy to use.