Show arrow in css

CSS Triangle

The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

.arrow-up < width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; >.arrow-down < width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f00; >.arrow-right < width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid green; >.arrow-left

For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Hi. How can i change the color inside the triangle ? And say, if i just need to make sure that the bottom part of the triangle is not there, how do i do that as well ?

Hey thank you very much!
It worked!
But can you tell me how to give a border to this type of triangle?(As it is only made up of the border of a div!!)

Hey Tarun!
As it is only made up of border, all you can do is increase the size of that border, if you really wish to, because that’s all you can do to it. And you’ll have to give negative margin of equal pixels as those of the border size to maintain alignment.

@mixin equilateral-triangle($direction, $size, $color) < width: 0; height: 0; @if $direction == 'up' < border-left: em($size) solid transparent; border-right: em($size) solid transparent; border-bottom: em($size) solid $color; >@else if $direction == 'down' < border-left: em($size) solid transparent; border-right: em($size) solid transparent; border-top: em($size) solid $color; >@else if $direction == 'right' < border-top: em($size) solid transparent; border-bottom: em($size) solid transparent; border-left: em($size) solid $color; >@else if $direction == 'left' < border-top: em($size) solid transparent; border-bottom: em($size) solid transparent; border-right: em($size) solid $color; >> 

I wrote a little addition to this article to achieve the same but with some functional SCSS to the DRY rescue. http://powdertothepeople.tv/2015/06/29/Functional-SCSS/

Thank you for the clear explanation! There are several pages which show how to put arrows on tooltips, etc but they left me completely mystified as to how they worked. Now at last, thanks to this page, I understand!

It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).

Thanks, TeMc, now it all makes sense. By the way, it’s fun to play with the inner div’s right border width, and change the shape and size of the triangle!

thanks for making it clear.. thanks even to admin to share a lovely tricks 🙂 am very greatful to this website.. 🙂

Thanks for the reminder! It hass been so long since I’ve noticed how different border colors act together (think table cells).

-moz-transform: rotate(1deg); -o-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg); 

Wow, nice job with the flag on your link… Also, I wanted to ask why do you use ‘dashed’ instead of ‘solid’? I wasn’t able to understand the difference.. Cheers & congrats again.

 .left-arrow < border-color: transparent black; border-style: solid; border-width: 20px 20px 20px 0px; height: 0px; width: 0px; >.right-arrow < border-color: transparent black; border-style: solid; border-width: 20px 0px 20px 20px; height: 0px; width: 0px; >.down-arrow < border-color: black transparent; border-style: solid; border-width: 20px 20px 0px 20px; height: 0px; width: 0px; >.up-arrow 

Thanks, Otto. I wasn’t sure what the syntax was for 2 values on the border-color until I found this article, which may help others; https://developer.mozilla.org/en-US/docs/Web/CSS/border-color

If the dimensions of the triangle aren’t symmetrical, you tend to get those jagged lines. It appears to be more noticeable in Webkit, for some reason–not sure why.

You may have figured this out, but here goes anyway: For webkit, to get the lines smooth, add the following rule: transform: rotate(360deg); Play with different deg depending on your arrow’s direction.

try adding “box-shadow: 0 0 2px orange;” to the triangle. it might help. if not reducing the “2px” in it or incressing will change the blur strangth of the shadow.

Cool trick, I tried it first after seeing it elsewhere.
Then I came across the ivy-leaf trick on this website, and if you want the triangle to scale with the text, change the ivy leaf to a triangle. down: \25bc
up: \25b2
right: \25b6 I couldn’t find a “map”, but if you play around changing the last 4 digits in the url, you can find all kinds of cool stuff.
http://www.decodeunicode.org/en/u+25bc

You can use those triangles to create Real-time 3D objects in IE6. Yes, IE6!
http://www.uselesspickles.com/triangles/ Borders can also build a house:
http://www.designdetector.com/tips/3DBorderDemo2.html

I noticed a small issue with this technique in Firefox 5.0 (Win). FF 5.0 renders a light stroke on the front sides of the triangle. Here’s a link to a jsFiddle that replicates the issue: http://jsfiddle.net/brightlight/4DmFk/ Obviously, you’ll need to view that in FF 5.0 (Win) to see what I’m talking about.

Update: Changing the border style to “inset” on the transparent sides of the element seems to fix this issue in Firefox 5 and 6. Other browsers continue to render the triangles fine even after this border-style adjustment.

great tutorial.
@ted: great tip on the “inset”. Was working my mind through the reason for the strange micro-border!

In scenarios like below I get pixelation in Safari, IE and some yet less in FF. Is anyone else getting this ?
.point_bottom border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 80px solid #FF0000;
bottom: 0;
height: 0;
left: -101px;
position: absolute;
width: 0;
>

If the triangle is not symmetrical, it won’t look smooth. Basically, it’s like trying to draw a straight line at a 30-degree angle in a bitmap image. The line will always look a little jagged. This trick is just an exploitation of CSS behavior–I don’t believe CSS was intended to do this sort of thing. If you want truly straight lines at whatever angle, you might want to explore SVG.

You do some limited drop shadows using a pseudo-element. Just position it a little different than the original triangle shape and then change the color and/or transparency. A little rotation looks nice with this effect, too. I saw it in a NetTuts piece recently.

Is it possible to use this on a [submit] button?
so the end result would look like this https://skitch.com/iestynx/fa6et/artwork I’m a bit new to this so sorry if it’s a stupid question. Thanks

Lestyn, I guess the button can’t be achieved using a div.I tried creating the same using two div and i got the same. Here’s my Try http://jsfiddle.net/smkarthick/vb5Tv/3/

The problem that some people have been reporting with inaccurate edges is to do with antialiasing and the fact that transparent is equivalent to rgba(0, 0, 0, 0) —transparent black. When combined with antialiasing, this produces a result which is not what the author intended. I am not aware whether any browsers used antialiasing back in mid-2009, but now, Firefox distinctly does. I am in the process of writing a blog post (as part of starting a blog, which makes it take longer…) dealing with this particular subject with full details, explanations, the caveats, et cetera, and I initially planned on waiting till I had that done before posting this. But as it’s been several weeks since I began to plan it and will probably be at least as many more until it’s ready and posted, I figured I should try to stop people using transparent when they don’t mean it before it’s too too late. My general recommendation is to avoid using transparent unless you know that it’s suitable (i.e. black is the touching colour). If you have to care about browsers that don’t support rgba() values (IE8 and earlier), then specify it as transparent and add a border-left/right/top/bottom-color value after it with the correct rgba value to override it and make it correct.

I was just playing around with the antialiasing issue and found that if I set the border widths to make the triangle symmetrical and then do a scale transform to the triangle to stretch it to the right dimensions, it forces the browser to antialias the edges and gets rid of the jaggedness.

The transform trick works a treat in webkit! Unfortunately for me it introduces issues in Firefox. There’s now a vertical split down the middle of the triangle whenever I scale it up or down… http://jsfiddle.net/bensmithett/fEjJ3/

I’ve noticed a problem in IE9 if you use this to style a button as an arrow. If you define a style for all 4 borders, it will show them all (even if they’re transparent). Since you’ll want to reset all of the borders to avoid the default button style, this causes a problem. It also does some funny stuff with the sizes, so even if you only define the 3 sides you need, it doesn’t look right. So far, the best I’ve found for a workaround is to use a (or a div) instead, even though it’s less semantic.

Источник

63 CSS Arrows

Collection of free HTML and CSS arrow code examples from Codepen, GitHub and other resources: animated, back to top, scroll down, simple and for boxes. Update of October 2021. 4 new items.

Table of Contents

Animated Arrows

Author

Links

Made with

About a code

Smooth Arrow Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

The Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Flipping Arrows

Flipping arrows made with css-doodle.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Awesome Arrow Icon

Animated awesome arrow icon with JS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Dashed Animated Arrow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Arrow @keyframes Animation

Using checkbox as the basis of the arrow state.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Arrow Animation Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Double Arrow Button

Animate an arrow button on click or hover.

Author

Links

Made with

About the code

Arrow animation

HTML and CSS arrow animation.

Author

Links

Made with

About the code

Arrow Animations

Sliding arrow css animations.

Author

Links

Made with

About the code

Arrow Hover Effect

Pure CSS arrow hover effect.

Author

Links

Made with

About the code

Animated CSS Arrows

Arrowed Link

Arrowed link — circle on hover (cf Google Home website).
Made by Alexandre Jolly
May 21, 2017

Triple Arrow Animation

SVG triple arrow animation.
Made by M-A Lavigne
May 5, 2017

Author

Links

Made with

About the code

Animated Arrow

Author

Links

Made with

About the code

Arrow animations

Some CSS only arrow animations that indicate state changes.

Author

Links

Made with

About the code

Animated Arrow Icon

Author

Links

Made with

About the code

Arrow animation

Author

Links

Made with

About the code

3 Arrows Animation

3 arrows animation with HTML, CSS and image.

Arrow Keyframes Animation

Arrow keyframes animation with HTML and CSS.
Made by Stephen Rodriguez
June 21, 2014

Arrow Icon Animation

Arrow icon animation with HTML and CSS.
Made by Bennett Feely
October 9, 2013

Author

Links

Made with

About a code

CSS Only Animated Arrow

Just example of making arrows only with CSS and animate it with CSS3.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Arrows Back To Top

3 HTML and CSS arrow back to top code examples.

Author

Links

Made with

About the code

Simple CSS Arrow

Simple pure CSS arrow button.

HTML And CSS ‘Back To Top’ Arrows

Animated ‘back to top’ arrows.
Made by EricPorter
June 13, 2017

Author

Links

Made with

About the code

Up Arrow

Animated up arrow button style. Designed to make the action more user friendly for the end user. The text fades away and is replaced with a animation designed to hint at the effect this button will have on the site.

Arrow Boxes

5 HTML and CSS arrow box code examples.

Author

Links

Made with

Источник

How TO — CSS Arrows

Right arrow:

Left arrow:

Up arrow:

Down arrow:

Step 2) Add CSS:

Example

.arrow <
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
>

.right transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
>

.left transform: rotate(135deg);
-webkit-transform: rotate(135deg);
>

.up transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
>

.down transform: rotate(45deg);
-webkit-transform: rotate(45deg);
>

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник