CSS实现自定义手型气泡提示

实现自定义的手型气泡提示




<html>  
<head>  
    <meta charset="utf-8">  
    <title></title>  
    <style type="text/css">  
   
    .test{  
      	background: #CE5010 none repeat scroll 0% 0%;
				position: relative;
				border-radius: 20px;
				margin: 60px;
				height: 2em;
				text-align: center;
				float: left;
				color: white;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 5px;
				font-size: 12px; 
    }  
     
    .test span.bot{  
    		 0;  
        height: 0;  
        font-size: 0;  
        overflow: hidden;  
        position: absolute; 
       border-style: solid;
			left: 0px;
			border-color: transparent transparent transparent rgb(206, 80, 16);
			top: 18px;
			border- 12px;
    }  
    
   
    </style>  
</head>  
  
<body>  
    <div class="test">  
        <span class="bot"></span>  
        CSS"边框法"实现气泡对话框效果，需要两个辅助span
    </div>  
      
     
</body>  ""
  
<html>
实现效果如下：