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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM