How to make a fantastic arrow using CSS?

Question

Okay, so everyone knows that you can make a triangle using this:

#triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 

And that creates a solid triangle. But how would you make a triangle with a similar triangle like this?

Answer 1

You can use the pseudo-element before or after and apply some CSS to it. There are different ways. You can add both before and after , and rotate and place each of them in one of the columns. A simpler solution is to add two borders only to the before element and rotate it with transform: rotate .

Scroll down for another solution that uses the actual item instead of pseudo-elements

In this case, I added arrows in the form of markers in the list and used em sizes to make their size the appropriate font for the list.

 ul { list-style: none; } ul.big { list-style: none; font-size: 300% } li::before { position: relative; /* top: 3pt; Uncomment this to lower the icons as requested in comments*/ content: ""; display: inline-block; /* By using an em scale, the arrows will size with the font */ width: 0.4em; height: 0.4em; border-right: 0.2em solid black; border-top: 0.2em solid black; transform: rotate(45deg); margin-right: 0.5em; } /* Change color */ li:hover { color: red; /* For the text */ } li:hover::before { border-color: red; /* For the arrow (which is a border) */ } 

 <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <ul class="big"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> 

Of course, you do not need to use before or after , you can apply the same trick to a normal element. For the list above, this is convenient because you do not need additional markup. But sometimes you may need (or need) markup. You can use a div or span for this, and I even saw that people even recycle the i element for “icons”. So the markup may look like below. Whether using an <i> for this is correct is controversial, but you can also use a span for this to be safe.

 /* Default icon formatting */ i { display: inline-block; font-style: normal; position: relative; } /* Additional formatting for arrow icon */ i.arrow { /* top: 2pt; Uncomment this to lower the icons as requested in comments*/ width: 0.4em; height: 0.4em; border-right: 0.2em solid black; border-top: 0.2em solid black; transform: rotate(45deg); } 

 And so you can have an <i class="arrow" title="arrow icon"></i> in your text. This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request. I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect. 

If you're looking for more inspiration, be sure to check out this amazing Nicolas Gallagher CSS clean badge library. :)

Answer 2

This can be solved much easier than other offers.

Just draw a square and apply the border property to only two connecting sides.

Then rotate the square according to the direction you want the arrow to go for exaple: transform: rotate(<your degree here>)

 .triangle { border-right: 10px solid; border-bottom: 10px solid; height: 30px; width: 30px; transform: rotate(-45deg); } 

 <div class="triangle"></div> 

Answer 3

Jet arrows

they automatically resize using text and the color is the same color. Plug and play :)
jsBin demo site

 body{ font-size: 25px; /* Change font and see the magic! */ color: #f07; /* Change color and see the magic! */ } /* RESPONSIVE ARROWS */ [class^=arr-]{ border: solid currentColor; border-width: 0 .2em .2em 0; display: inline-block; padding: .20em; } .arr-right {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} .arr-left {transform:rotate(135deg); -webkit-transform:rotate(135deg);} .arr-up {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);} .arr-down {transform:rotate(45deg); -webkit-transform:rotate(45deg);} 

 This is <i class="arr-right"></i> .arr-right<br> This is <i class="arr-left"></i> .arr-left<br> This is <i class="arr-up"></i> .arr-up<br> This is <i class="arr-down"></i> .arr-down 

Answer 4

Here's a different approach:

1) Use the multiplication symbol: × & times;

2) Hide half of it with overflow:hidden

3) Then add the triangle as a pseudo-element for the tip.

The advantage here is that no conversions are needed. (It will work in IE8 +)

Fiddle

 .arrow { position: relative; } .arrow:before { content: '×'; display: inline-block; position: absolute; font-size: 240px; font-weight: bold; font-family: verdana; width: 103px; height: 151px; overflow: hidden; line-height: 117px; } .arrow:after { content: ''; display: inline-block; position: absolute; left: 101px; top: 51px; width: 0; height: 0; border-style: solid; border-width: 25px 0 25px 24px; border-color: transparent transparent transparent black; } 

 <div class="arrow"></div> 

Answer 5

Just use before and after Pseudo Elements - CSS

 *{box-sizing: border-box; padding: 0; margin: 0} :root{background: white; transition: background .3s ease-in-out} :root:hover{background: red } div{ margin: 20px auto; width: 150px; height: 150px; position:relative } div:before, div:after{ content: ''; position: absolute; width: 75px; height: 20px; background: black; left: 40px } div:before{ top: 45px; transform: rotateZ(45deg) } div:after{ bottom: 45px; transform: rotateZ(-45deg) } 

 <div/> 

Answer 6

Another approach using borders and no CSS3 properties:

 div, div:after{ border-width: 80px 0 80px 80px; border-color: transparent transparent transparent #000; border-style:solid; position:relative; } div:after{ content:''; position:absolute; left:-115px; top:-80px; border-left-color:#fff; } 

 <div></div> 

Answer 7

> a very wonderful arrow in itself! Just add a div with it and customize it.

 div{ font-size:50px; } div::before{ content:">"; font: 50px 'Consolas'; font-weight:900; } 

 <div class="arrowed">Hatz!</div> 

Answer 8

Left arrow right hover effect using Roko C. Buljan shadow trick

 .arr { display: inline-block; padding: 1.2em; box-shadow: 8px 8px 0 2px #777 inset; } .arr.left { transform: rotate(-45deg); } .arr.right { transform: rotate(135deg); } .arr:hover { box-shadow: 8px 8px 0 2px #000 inset } 

 <div class="arr left"></div> <div class="arr right"></div> 

Answer 9

I needed to change input to an arrow in my project. The following is the final work.

 #in_submit { background-color: white; border-left: #B4C8E9; border-top: #B4C8E9; border-right: 3px solid black; border-bottom: 3px solid black; width: 15px; height: 15px; transform: rotate(-45deg); margin-top: 4px; margin-left: 4px; position: absolute; cursor: pointer; } 

 <input id="in_submit" type="button" class="convert_btn"> 

Here is fiddle

Answer 10

 .arrow { display : inline-block; font-size: 10px; /* adjust size */ line-height: 1em; /* adjust vertical positioning */ border: 3px solid #000000; border-left: transparent; border-bottom: transparent; width: 1em; /* use font-size to change overall size */ height: 1em; /* use font-size to change overall size */ } .arrow:before { content: "\00a0"; /* needed to hook line-height to "something" */ } .arrow.left { margin-left: 0.5em; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); } .arrow.right { margin-right: 0.5em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .arrow.top { line-height: 0.5em; /* use this to adjust vertical positioning */ margin-left: 0.5em; margin-right: 0.5em; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .arrow.bottom { line-height: 2em; /* use this to adjust vertical positioning */ margin-left: 0.5em; margin-right: 0.5em; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } 

 <div> here are some arrows <div class='arrow left'></div> space <div class='arrow right'></div> space <div class='arrow top'></div> space <div class='arrow bottom'></div> space with proper spacing? </div> 

Similar to the Roko C, but with a bit more control over size and placement.