The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/css">
Html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
Margin: 0;
Padding: 0
}
Fieldset, img {
Border: 0
}
Input, textarea, select {
Font-family: inherit;
Font-size: inherit;
Font-weight: inherit;
Border-radius: 5px
}
Input, textarea, select {
Font-size: 100%
}
Body {
Background: 0;
Color: #333;
Font: 13px/1.5 "", 'helvetica Neue ', Helvetica, Tahoma, Arial, sans-serif;
Margin: 0 auto;
Min-height: 400px
}
. Event-up-count {
Opacity: 0.87;
Filter: alpha (opacity = 87 );
Width: 300px; margin: 30px auto;
}
. Event-up-count. number {
Background: # EE0101;
Border: 2px solid # dddddd;
Border-radius: 6px;
Box-shadow: 0 0 6 PX #000000;
Color: # ffffff;
Font-size: 12px;
Font-weight: 800;
Padding: 4px 10px;
Position: relative;
Width: 60px;
Z-index: 5001;
}
. Event-up-count. arrow {
Margin:-2px 0 0 13px;
Width: 20px;
Position: relative;
Z-index: 5006;
}
. Event-up-count. arrow div {
Background: # ee0101;
Border-left: 2px solid # dddddddd;
Border-right: 2px solid # dddddddd;
Box-shadow: 0 2px 3px #444444;
Height: 1px;
Line-height: 0;
Display: block;
Font-size: 0;
Margin: 0 auto;
}
. Event-up-count. arrow. line1 {
Background: # dddddd;
Border: medium none;
Width: 1px;
}
. Event-up-count. arrow. line2 {
Background: # dddddd;
Border: medium none;
Width: 3px;
}
. Event-up-count. arrow. line3 {
Border-bottom: 0 solid # dddddddd;
Border-left: 2px solid # dddddddd;
Border-right: 2px solid # dddddddd;
Width: 1px;
}
. Event-up-count. arrow. line4 {
Width: 3px;
}
. Event-up-count. arrow. line5 {
Width: 5px;
}
. Event-up-count. arrow. line6 {
Width: 7px;
}
. Event-up-count. arrow. line7 {
Width: 9px;
}
. Event-up-count. arrow. line8 {
Width: 11px;
}
. Event-up-count. arrow. line9 {
Border: medium none;
Width: 13px;
}
. Event-up-count. arrow. line10 {
Border: medium none;
Width: 15px;
}
</Style>
</Head>
<Body>
<Div class = "event-up-count" id = "event_up_detail">
<Div class = "number"> <span id = "event_up_count"> 89 </span> <br>
</Div>
<Div class = "arrow">
<Div class = "line10"> <! --> </Div>
<Div class = "line9"> <! --> </Div>
<Div class = "line8"> <! --> </Div>
<Div class = "line7"> <! --> </Div>
<Div class = "line6"> <! --> </Div>
<Div class = "line5"> <! --> </Div>
<Div class = "line4"> <! --> </Div>
<Div class = "line3"> <! --> </Div>
<Div class = "line2"> <! --> </Div>
<Div class = "line1"> <! --> </Div>
</Div>
</Div>
</Body>
</Html>