Pure CSS Draw triangle arrow effect

recently I want to revise this website, I want to put a hint box above. It's easy, but I want the tip box to have a triangular arrow on it. However, the thought of this need to use pictures, and a variety of colors, arrows in various directions to prepare countless species, which is almost a disaster. Luckily, MooTools's core developed the Darren Waddell told me a very good

With pure CSS, you only need a little code to create a variety of browser-compatible triangular arrows!

CSS Code

Copy Code

The code is as follows:

/* Create an arrow so points up * *

div.arrow-up {

width:0;

height:0;

border-left:5px solid Transparent; /* LEFT ARROW Slant * *

border-right:5px solid Transparent; * Right ARROW Slant *

border-bottom:5px solid #2f2f2f; /* Bottom, add background color here * *

font-size:0;

line-height:0;

}

/* Create an arrow so points down * *

Div.arrow-down {

width:0;

height:0;

border-left:5px solid Transparent;

border-right:5px solid Transparent;

border-top:5px solid #2f2f2f;

font-size:0;

line-height:0;

}

/* Create an arrow so points left * *

Div.arrow-left {

width:0;

height:0;

border-bottom:5px solid Transparent; /* LEFT ARROW Slant * *

border-top:5px solid Transparent; * Right ARROW Slant *

border-right:5px solid #2f2f2f; /* Bottom, add background color here * *

font-size:0;

line-height:0;

}

/* Create an arrow so points right * *

Div.arrow-right {

width:0;

height:0;

border-bottom:5px solid Transparent; /* LEFT ARROW Slant * *

border-top:5px solid Transparent; * Right ARROW Slant *

border-left:5px solid #2f2f2f; /* Bottom, add background color here * *

font-size:0;

line-height:0;

}

The key to drawing these triangles is that you want to have a thick border around the two sides of the direction that the arrows are pointing to. The side of the direction of the back arrow is also the same thick border, and the color of this side is your triangle color. The thicker the border, the larger the triangle. In this way you can draw a variety of colors, various sizes, various orientations of the arrows. The best thing about it is that you just need a few lines of CSS code to do that.

Using: Before and: After drawing a CSS triangle

The above CSS example uses the real page element to draw, but sometimes this real element also has it to use, you cannot walk on the surface directly to carry on the operation, this is how to do? A pure CSS triangle can also be drawn using pseudo elements (pseudo-element). The following is the drawing method:

Copy Code

The code is as follows:

Div.tooltip {

/* tooltip content styling in here; Nothing to do with arrows * *

}

/* shared with before */

Div.tooltip:before, Div.tooltip:after {

Content: ';

height:0;

Position:absolute;

width:0;

border:10px solid Transparent; /* Arrow Size * *

}

/* These arrows'll point up/*

/* top-stacked, smaller arrow *

Div.tooltip:before {

Border-bottom-color: #fff; * Arrow Color *

* Positioning * *

Position:absolute;

Top: -19px;

left:255px;

Z-index:2;

}

/* Arrow which acts as a background shadow * *

Div.tooltip:after {

Border-bottom-color: #333; * Arrow Color *

* Positioning * *

Position:absolute;

Top: -24px;

left:255px;

Z-index:1;

}

The color of the border on the side of the back arrow is the color of the triangle arrow. Drawing this arrow does not need to be used at the same time: Before and: After two pseudo elements-one is enough. And the other one, you can use it as the background shadow or the background side of the previous one.

Should have known this technique earlier! I believe this simple and easy technology will be used in the future when we do interface improvement.