SOURCE

<div id="info-content" class="button-content">书签</div> 
<div id="info-content" class="button-content-right">书签右</div> 
<a href='http://blog.csdn.net/xy_ggsddu/article/details/47209561'>参考链接</a>

.button-content:before{ 
  	content:'';
    width:20px;  
    height: 0%;  
    border: 15px solid;  
    border-color: transparent #B2DE34 transparent transparent ;   
    position: absolute;  
    right:100px;  
    top: 0px;  
}  
.button-content{  
    width: 100px;  
    height: 30px;  
    background-color: #B2DE34;  
    font-size: small;  
    line-height: 30px;  
    text-align: center;  
    position: absolute;  
    top: 50px;  
    right: 100px;  
}  
.button-content:after{  
  	content:'';
    width:10px;
    border: 15px solid;  
    border-color: transparent transparent transparent #58661C;   
    border-top: 0;  
    right: -25px;  
    position: absolute;  
    top: 30px;  
}
.button-content-right{
    width: 100px;  
    height: 30px;  
    background-color: #B2DE34;  
    font-size: small;  
    line-height: 30px;  
    text-align: center;  
    position: absolute;  
    top: 50px;  
    left: 100px;  
}
.button-content-right:before{
  	content:'';
    width:10px;  
    height: 0%;  
    border: 15px solid;  
    border-color: transparent #58661C transparent  transparent ;   
    border-top: 0;  
    left: -25px;  
    position: absolute;  
    top: 30px;
}
.button-content-right:after{
    content:'';
    width:20px;  
    height: 0%;  
    border: 15px solid;  
    border-color: transparent  transparent  transparent #B2DE34;   
    position: absolute;  
    right:-50px;  
    top: 0px; 
}