CSS tips: corner backgrounds and triangles

Two very good tips in front-end development: CSS triangles and rounded corner backgrounds. 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
By changing the margin value of the stacked element to achieve the rounded corner effect, some people may say that it is not so troublesome. css3 can be done with a few codes, but it is not practical at present, and few browsers are supported.
CSS Section

. R _ Top , . R _ Bottom { Display: Block ; Background: Transparent ; Font-size: 1 Px } / * 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: 1 Px }
. R _ B , . R _ C , . R _ D { Background: # Cf6 }
. R _ A { Margin: 0 5 Px }
. R _ B { Margin: 0 3 Px ; Border-width: 0 2 Px }
. R _ C { Margin: 0 2 Px }
. R _ D { Height: 2 Px ; Margin: 0 1 Px }

HTML section

<! -- Upper left/upper right -->
< Div Class =" R _ Top "> < Em Class =" R _ A "> </ Em > < Em Class =" R _ B "> </ Em > < Em Class =" R _ C "> </ Em > < Em Class =" R _ D "> </ Em > </ Div >
< Div Class =" Box ">
...... Content container .....
</ Div >
<! -- Lower left/lower right -->
< Div Class =" R _ Bottom "> < Em Class =" R _ D "> </ Em > < Em Class =" R _ C "> </ Em > < Em Class =" R _ B "> </ Em > < Em Class =" R _ A "> </ Em > </ Div >

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: 40 Px ; Border-style: Solid ; Border-color: # Cf6 # Fff # 39C # FFC ;_ Filter: Chroma (color = #000000 )/* Color filter to make IE6 transparent. The color value of the filter cannot be abbreviated */ }
Em. { Border-color: Transparent Transparent # Fff Transparent ;_ Border-color: #000 #000 # Fff #000 }
Em. B { Border-color: Transparent Transparent Transparent # Fff ;_ Border-color: #000 #000 #000 # Fff }
Em. c { Border-color: # Fff Transparent Transparent Transparent ;_ Border-color: # Fff #000 #000 #000 }
Em. d { Border-color: Transparent # Fff Transparent Transparent ;_ Border-color: #000 # Fff #000 #000 }

HTML call

< Em > < Em > <! -- It's a triangle.

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

 

Blog published in mr. Think: http://mrthink.net/css-common-round-triangle/ reprint please indicate the source.