CSS, image-less, and small triangle

: Method 1 method 2 method 3 Method 1: CSS Code :

 
# Top {
 

 
Position: absolute; width: 0px; Height: 0px; line-Height: 0px;/* to prevent question type in IE */border-bottom: 10px solid #89b007; border-left: 10px solid # FFF; border-Right: 10px solid # FFF; left: 76px; top:-10px ;}# first {border-radius: 8px; -Moz-border-radius: 8px;-MS-border-radius: 8px;-o-border-radius: 8px;-WebKit-border-radius: 8px; position: absolute; height: 150px; width: 300px; Background: #89b007; left: 22px; top: 33px;} # first p {padding: 10px; line-Height: 1.5; color: # FFF ;}
 

HTML code:

 
<Div id = "first"> <p> small triangle with background color is relatively simple! </P> <span id = "TOP"> </span> </div>
 

Method 2: CSS code:

* {Margin: 0; padding: 0;} A {color: #666; text-Decoration: none; line-Height: 25px; text-indent: 24px ;}. W {width: 200px; position: absolute; Background: #999; left: 400px; top: 200px; font-size: 12px; text-align: left}/* simulate the gray shadow background layer */. X {width: 180px; position: relative; Background: # FFF; Border: 1px solid # CCC; padding: 10px; left:-4px; top:-4px ;} /* content Div */. Y ,. z {position: absolute; left: 141px ;}. Y {color: # CCC; font-size: 19px; top:-12px; Z-index: 1;}/* simulate small triangle */. z {color: # FFF; font-size: 19px; top:-11px; Z-index: 3;}/* simulate a small triangle */
 

HTML code:

 
<Div class = "W"> <Div class = "X"> <p> <a href = "#"> use object-oriented ideas to write CSS, use an object-oriented mindset to write CSS. </A> </P> <SPAN class = "Z"> ◆ </span> <SPAN class = "Y"> ◆ </span> </div> </ div>
 

Method 3: CSS code:

# Content {text-indent: 2em; box-Shadow: 0px 0px 10px #999; padding: 10px; font-size: 12px; line-Height: 1.5; border-radius: 5px; Height: 100px; width: 250px; position: relative; margin: 200px auto; Border: 1px solid # CCC;} span {position: absolute; left: 25px; height: 0px; width: 0px;}/* upper triangle implementation style start */span. out {Line-Height: 0; border-width: 10px; border-color: transparent # CCC transparent; border-style: dashed solid dashed; top:-20px ;} span. iner {border-width: 10px; border-color: # fff transparent; border-style: dashed solid dashed; top:-19px; line-Height: 0 ;} /* Start of the right triangle implementation style */span. right {Background: # FFF; border-width: 1px; width: 16px; Height: 16px; border-color: # CCC transparent; border-style: solid dashed; left: 270px; top: 30px; border-radius: 0 0 100% 0; /* here, do not select the absolute value for the radius value because the port cannot be blocked during the enlargement or reduction process */line-Height: 0; box-Shadow: 5px 0 10px # AAA ;}
 

HTML code:

<Div id = "content"> <SPAN class = "out"> </span> <SPAN class = "iner"> </span> <SPAN class = "right"> </span> <p> no matter what content is written, in short, it is necessary to implement a small triangle without a figure. If there is a background color, it would be excellent. If there is no background color, it would be a little troublesome. </P> </div>