please see the below I from Google gmail cross-sectional figure on a page (this is the second time I in the same location screenshots) :
gmail use screenshots of the characters
in the red circle circle down the small triangle is the use of characters, non-mainstream characters. Actually, Google Google this character belongs to small applications, character did not reflect true potential, and this article will explore how to use the pioneering characters instead of images to realize seems only pictures can realize Angle effect, or mostly use images to realize the rounded effect. I don't fly and research of characters, so some conclusions or method is not optimal, later may have more perfect method, so this article subject to add beta, table test. Mentioned in this paper, some methods, may be not practical in actual project, the key is to help people broaden the mind, show the potential of the characters in the web development.
note: this article &other; Throughout the &character; Mainly refers to contain a special shape, the keyboard cannot be directly input characters. Although English letters ABC count characters, this paper mentioned &other; Throughout the &character; Meaning is not have this kind of common characters, the same below, not here.

3, rounded rectangle using characters or horns effect
code is as follows:


<Div class="sharp_square >"
<Span class="quarter_round round_lt >" <Span class="lt" >Low </span> </span>
<Span class="quarter_round round_rt >" <Span class="rt" >Low </span> </span>
<Span class="quarter_round round_lb >" <Span class="lb" >Low </span> </span>
<Span class="quarter_round round_rb >" <Span class="rb" >Low </span> </span>
</div>

  code is as follows:  


sharp_square {width: 333 px; Height: 110 px; Background: # a0b3d6; Position: relative; Color: # a0b3d6; }/* a parity under IE6 bugs, to avoid 1 pixel error of height to width is even. */
sharp_square. Quarter_round {position: absolute; }
. Sharp_square. Quarter_round span {background: white; }
. Sharp_square. Round_lt {left: - 1 px; Top: 0 px; }
. Sharp_square. Round_rt {right: - 1 px; Top: 0 px; }
. Sharp_square. Round_lb {left: - 1 px; Bottom: 0 px; }
. Sharp_square. Round_rb {right: - 1 px; Bottom: 0 px; }

 


This concludes the body part