Rectangular indicator box with arrows and bubble box

HTML code:

<Div class = "tag">
<Em> </em>
<SPAN class = "White-Triangle"> </span>
<P>
<Span>! </Span>
The launch time is inconsistent with the schedule!
</P>
</Div>

 

Less code:

/******** Rectangular box with arrows *******/
. Tag {
Border: 1px solid # DDD;
Padding: 20px 15px;
Background-color: # FFF;
Font-size: 14px;
Color: #666;
Position: relative;
Em {/***** solid triangle ****/
Width: 0;
Height: 0;
Line-Height: 0;/*** to solve IE6 compatibility issues */
Font-size: 0;/*** to solve IE6 compatibility issues */
Border-width: 10px;
Border-style: dashed solid;/*** to solve IE6 compatibility issues */
Border-color: transparent # DDD;
Position: absolute;
Left: 20px;
Top:-20px;
}
. White-triangle {/*** a white triangle superimposed on a solid triangle **/
Width: 0;
Height: 0;
Line-Height: 0;
Font-size: 0;
Border-width: 8px;
Border-style: dashed solid;
Border-color: transparent # FFF;
Position: absolute;
Left: 22px;
Top:-16px;
}
P {
SPAN {/*** red circle **/
Width: 18px;
Height: 18px;
Border-radius: 18px;
Text-align: center;
Line-Height: 18px;
Background-color: # ff9595;
Display: inline-block;
Color: # FFF;
Margin-Right: 5px;
}
}
}

 

:

Rectangular indicator box with arrows and bubble box