I wrote one beforeCreate a border with a triangle with pure CSS, That articleArticleIt uses special HTML characters to create triangles. Today we will introduce how to use border to create triangles.
HtmlCodeAs follows:
< Div Class = "Arrow-up" > </ Div > < Div Class = "Arrow-down" > </ Div > < Div Class = "Arrow-left" > </ Div > < Div Class = "Arrow-Right" > </ Div >
The CSS code is as follows:
. Arrow-up { Width : 0 ; Height : 0 ; Border-left : 5px solid transparent ; Border-Right : 5px solid transparent ; _ Border-left : 5px solid white ; _ Border-Right :5px solid white ; Border-bottom : 5px solid black ; Overflow : Hidden ;} . Arrow-down { Width : 0 ; Height : 0 ; Border-left : 20px solid transparent ;Border-Right : 20px solid transparent ; _ Border-left : 20px solid white ; _ Border-Right : 20px solid white ; Border-top : 20px solid # f00 ; Overflow : Hidden ;} . Arrow-Right { Width :0 ; Height : 0 ; Border-top : 60px solid transparent ; Border-bottom : 60px solid transparent ; _ Border-top : 60px solid white ; _ Border-bottom : 60px solid white ; Border-left :60px solid green ; Overflow : Hidden ;} . Arrow-left { Width : 0 ; Height : 0 ; Border-top : 10px solid transparent ; Border-bottom : 10px solid transparent ;_ Border-top : 10px solid white ; _ Border-bottom : 10px solid white ; Border-Right : 10px solid blue ; Overflow : Hidden ;}
As follows:
Test browsers: chrome, Firefox, IE8, IE7, IE6, Safari, opera
PS:
1. The original version is not compatible with IE 6 browsers, so I changed the version to be compatible with all browsers.
2. As opposed to using border for triangle, I prefer to use special HTML characters for triangle creation.
original article address: http://www.w3cplus.com/code/303.html