) CSS rounded corner background and triangle

Two very good tips in front-end development, CSS triangle and rounded corner background. Indeed, they can all be implemented through images.CodeThe implementation can reduce the image loading workload. When you encounter a non-solid background under a triangle or rounded corner, you have to consider the IE6 PNG compatibility issue. Well, IE6 is the source of all evil. In this case, CSS triangles and rounded corner backgrounds are the best choice.

View Demo:Click here to view the demo

CSS rounded corner background

You can achieve the rounded corner effect by changing the margin value of the stacked element. Of course, some people will say that it doesn't have to be so troublesome. css3 can be done with a few pieces of code, but it is not practical at present, and few browsers are supported.

CSS Section

 
. R_top ,. r_bottom {display: block; Background: transparent; font-size: 1px}/* containers in the upper left corner and lower left corner */. r_a ,. r_ B ,. r_C ,. r_d {display: block; overflow: hidden}/* four rounded corners */. r_a ,. r_ B ,. r_C {Height: 1px }. r_ B ,. r_C ,. r_d {Background: # cf6 }. r_a {margin: 0 5px }. r_ B {margin: 0 3px; border-width: 0 2px }. r_C {margin: 0 2px }. r_d {Height: 2px; margin: 0 1px}
 

HTML section

  ...... Content container .....

  
 

CSS triangle

This is relatively simple. After the element is defined as block-level 0 (0 width 0 height 0 font size 0 rows high), it is implemented by changing the border-color value of the element. This article uses em elements. Of course, if you use EM frequently in your project, you can also use SAMP, strong, and other elements to avoid conflicts. Of course, even if you use a CSS triangle, the evil IE6 will give you some trouble: IE6 does not support the border-color transparent value. What should I do? Write a border-color value for IE6 and use the chroma filter to make it transparent. For details, see the code.

CSS Section

Em {display: block; width: 0; Height: 0; font-size: 0; line-Height: 0; border-width: 40px; border-style: solid; border-color: # cf6 # fff # 39C # FFC; _ filter: chroma (color = #000000)/* color filter, allowing IE6 To implement transparent bordercolor. the color value of the filter cannot be abbreviated as */} em. A {border-color: transparent # fff transparent; _ border-color: #000 #000 # fff #000} em. B {border-color: transparent # FFF; _ border-color: #000 #000 #000 # fff} em. c {border-color: # fff transparent; _ border-color: # fff #000 #000 #000} em. d {border-color: transparent # fff transparent; _ border-color: #000 # fff #000 #000}
 

HTML call

 
<Em> </em>

  
 

This article is only one of the many CSS methods. For more methods, Google.

View Original on the New Page