Technical explanation of triangle arrow pattern drawn by CCS

Recently, I want to modify this website. I want to put a prompt box on it. It’s easy, but I want a triangle arrow on the prompt box. However, it is almost a disaster to think of using pictures and preparing countless kinds of arrows in various colors and directions. Fortunately, Darren Waddell, the core developer of MooTools, told me a great technique: drawing triangle arrows with CSS. Using pure CSS, you only need a little code to create triangle arrows compatible with all kinds of browsers!

Watch the demoCSS code

/* create an arrow that 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 that 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 that 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 that 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 need to have very thick borders on the two sides of the arrow. The side facing away from the arrow is the same thick border, and the color of this side is the color of your triangle. The thicker the border, the larger the triangle. In this way, you can draw arrows of various colors, sizes and orientations. Best of all, you only need a few lines of CSS code to achieve this effect.

Drawing CSS triangles using: before and: after

The CSS example above uses real page elements for drawing, but sometimes this real element still has other uses. You can’t directly operate on it. What can you do? In fact, the triangle of pure CSS can also be drawn with pseudo element. The following is the drawing method:

div.tooltip {
	/* tooltip content styling in here; nothing to do with arrows */
}

/* shared with before and after */
div.tooltip:before, div.tooltip:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 10px solid transparent; /* arrow size */
}

/* these arrows will 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 opposite the arrow is the color of the triangle arrow. You don’t need to use both: before and: after pseudo elements to draw the arrow – one is enough. On the other hand, you can use it as the background shadow or background edge of the previous one.

Watch the demo

I should have known about this technology earlier! I believe that this simple and easy technology will be of great use in future interface improvement.

(English: David Walsh.)

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image