Create an arrow without filling using CSS

Question

Creating a triangle using CSS is a fairly simple and common practice, but is it possible to create a triangle in the same way with a transparent background and just a border.

Here is what I would like to create:

Given how triangles are usually created, I don’t know where to start, because they rely on pseudo-elements and overlapping borders, etc. This clearly cannot be done if the border is transparent ...

Does anyone have any ideas how to do this? Is it 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 Capital sans-serif v: 𝖵 (U + 1d5b5)
• Mathematical sans-serif small v: 𝗏 (U + 1d5cf)
• N-ary logical or: ⋁ (U + 22c1)
• Roman numeral five: Ⅴ (U + 2164)
• Little 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

 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 5

Another alternative would be to use SVG to create a 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 is well maintained and relatively easy to use.

Answer 6

A solution with pseudo-elements. Designed for any item.

 .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; } 

 <a href="#" class="class"></a>