CSS Corner background and triangle implementation skills

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.

The code is as follows:

Copy code

. 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: DEN}/* 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

The code is as follows:	Copy code
<! -- Upper left/upper right --> <Div class = r_top> <em> & nbsp; </em> <em> & nbsp; </em> </div> <Div class = box>... content container... </div> <! -- Lower left/lower right --> <Div class = r_bottom> <em> </div>

It is relatively simple to define an element as block-level 0 (0 width 0 height 0 font size 0 rows high), 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.

The code is as follows:

Copy code

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 */} 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

The code is as follows:	Copy code
<Em> <! -- It is a triangle. Ha --> </em>

View the complete instance

 

The code is as follows:

Copy code

<Style> # Demo {background: #047} . Triangle {margin: 20px} . Round {margin: 0 20px} . Box {padding: 10px; background: # cf6; font-size: 36px; text-align: center; line-height: 80px} /* Round */ . 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: DEN}/* 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} /* Triangle */ . Triangle 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 */} . Triangle em. a {border-color: transparent # fff transparent; _ border-color: #000 #000 # fff #000} . Triangle em. B {border-color: transparent # fff; _ border-color: #000 #000 #000 # fff} . Triangle em. c {border-color: # fff transparent; _ border-color: # fff #000 #000 #000} . Triangle em. d {border-color: transparent # fff transparent; _ border-color: #000 # fff #000 #000} </Style> <Div id = "demo"> <Div class = "round">   <! -- 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"> I am a rounded rectangle, oh yeah! </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> </Div> <Div class = "triangle"> <Em> </em> <Br/> <Em class = "a"> </em> <Br/> <Em class = "B"> </em> <Br/> <Em class = "c"> </em> <Br/> <Em class = "d"> </em> <Br/> </Div> </Div>