CSS: The incredible border property_html/css_WEB-ITnose

Translation: The incredible CSS border attribute

Translator: dwqs

In CSS, there are many rules for its border attribute. For some things, like triangles or other images, we still use pictures instead. But that’s not necessary now, we can use CSS to form some basic shapes, and I’ve shared some tips on this.

1. Equilateral triangle:

.triangle_up{  height:0px; width:0px;  border-bottom:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;}

2. Inverted triangle:

.triangle_down{  height:0px; width:0px;  border-top:50px solid #006633;  border-left:50px solid transparent;  border-right:50px solid transparent;}

3. Left triangle

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  float:left;}

4. Right triangle

.triangle_right{  height:0px; width:0px; float:left;  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;}

5. Cross street effect

.crossSquare{  height:0px; width:0px;  border-right:50px solid blue;  border-top:50px solid gray;  border-bottom:50px solid red;  border-left:50px solid yellow;}

Demo demonstrations from 1 to 5 (for the convenience of demonstration, the source code has been changed (see below): http://jsfiddle.net/rt8cjtwq/embedded/result/

6. Direction arrow (highlight effect, source code changed)

CSS:

.triangle_left{  height:0px; width:0px;  border-left:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;  /*float:left;*/}.triangle_right{  height:0px; width:0px; /*float:left;*/  border-right:50px solid #006633;  border-top:50px solid transparent;  border-bottom:50px solid transparent;}

HTML:

<div class="arrow">  <div class="triangle_right"></div>  <div class="arrowLine"></div></div><div class="arrow">  <div class="arrowLine"></div>  <div class="triangle_left"></div></div>

Effect:

7. Make a Delicious Logo:

CSS:

.delociousLogo {   height:100px; width:100px; } .topleft {   height:0px; width:0px;   border-top:50px solid #FFFFFF;   border-right:0px solid #FFFFFF;   border-bottom:0px solid #FFFFFF;   border-left:50px solid #FFFFFF;   float:left; } .topright {   float:left;   height:0px; width:0px;   border-top:50px solid #0000CC;   border-right:0px solid #0000CC;   border-bottom:0px solid #0000CC;   border-left:50px solid #0000CC; } .bottomleft {   float:left;   height:0px; width:0px;   border-top:50px solid #000000;   border-right:0px solid #000000;   border-bottom:0px solid #000000;   border-left:50px solid #000000; } .bottomright {   float:left;   height:0px; width:0px;   border-top:50px solid #999999;   border-right:0px solid #999999;   border-bottom:0px solid #999999;   border-left:50px solid #999999; }

HTML:

<div class="delociousLogo">  <div class="topleft"></div>  <div class="topright"></div>  <div class="bottomleft"></div>  <div class="bottomright"></div></div>

Effect: (the border color in the upper left corner is white)

Recommended article: Revisiting CSS: Border property

Next article: 8 very useful PHP security functions, how many do you know?