css实现不规则div

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <style>
 8             .longen {
 9                 position:relative;
10                 width:300px;
11                 height:100px;
12                 border:1px solid red;
13                 margin: auto;
14                 } 
15             .longen span{
16                 position: absolute;
17                 left: -26px;
18                 top: 32px;
19                 border-top: 15px solid transparent;
20                 border-bottom: 15px solid transparent;
21                 border-right: 25px solid #f00;
22             }
23             .longen em{
24                 position: absolute;
25                 left: -50px;
26                 top: 32px;
27                 border-top: 15px solid transparent;
28                 border-bottom: 15px solid transparent;
29                 border-right: 25px solid white;
30                 border-left: 25px solid transparent;
31             }
32     </style>
33     <script type="text/javascript"></script>
34     </head>
35     <body>
36 
37         <div class="longen">
38             <span></span>
39             <em></em>
40             我是龙恩 我在气泡框内
41         </div>
42     </body>
43 </html>