css实现带背景颜色的小三角

 

<div id="first">
<p>带背景颜色的小三角实现是比较简单的</p>
<span id="top"></span>
</div>
<style>
#top{
    position:absolute;
    width:0px;
    height:0px;
    line-height:0px;
    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;}


</style>