A detailed analysis of CSS drawing triangle Arrow pattern technique

Recently I want to revise this website, I want to put a prompt box above. It's easy, but I want to have a triangle arrow on the Cue box. However, the thought of this requires the use of pictures, and various colors, arrows in various directions to prepare countless kinds, which is almost a disaster. Fortunately, MooTools's core developed Darren Waddell told me a great technique: Draw triangle arrows with CSS. With pure CSS, you can create a wide range of browser-compatible triangle arrows with minimal code!

CSS Code

/* Create an arrow, points up */p.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, points down */p.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, points left */p.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, points right */p.arrow-rightright {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 between the two sides of the direction the arrow is pointing. The opposite side of the arrow is also the same thick border, and this side of the color is the color of your triangle. The thicker the border, the larger the triangle. In this way you can draw arrows of various colors, various sizes, and various orientations. Best of all, you can do this with just a few lines of CSS code.

Use: Before and: after drawing css triangles

The above CSS example uses a real page element to draw, but sometimes this real element still has its use, you can not walk directly to the surface of the operation, this is how to do? A pure CSS triangle can actually be drawn using pseudo-elements (pseudo-element). Here's how to draw:

P.tooltip {/    * tooltip content styling in here; ' Nothing ' to does with arrows */}/   * shared with before and after */p. Tooltip:before, P.tooltip:after {    content: ';    height:0;    Position:absolute;    width:0;    border:10px solid Transparent; /* Arrow Size */}/   * These arrows would point up *//* top-stacked, smaller arrow */p.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 */p.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. 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 background edge of the previous one.

I should have known this technology sooner! I believe that this simple and convenient technology will be used in the future when we do the interface improvement.