<!doctype html> <html> <head> <meta charset="gbk"> <title>First Grid Demo</title> <style>> body,button,input,select,textarea{ font:12px/1.5 '微软雅黑',Verdana,Tahoma,Arial,/5b8b/4f53;/*后面是宋体的编码*/ } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0px; padding: 0px; } body{ padding:20px; } .cancel-reason{ position: absolute; border-top: 1px solid #D7C36C; border-bottom: 1px solid #D7C36C; } .cancel-reason .reason-detail{ position: relative; border-left: 1px solid #D7C36C; border-right: 1px solid #D7C36C; margin: 0px -1px; background-color: #FFFAD2; padding: 5px; width: 260px; } .reason-detail div{ background-color: #FFFFFF; padding:5px; } .cancel-reason span{ color: #808080; } .cancel-reason p{ /*text-indent: 5em; replace by margin-left: 5em for better */ margin:0px; padding:0px; margin-left: 5em; } i, s{ width: 0px; height: 0px; font-size: 0px; line-height: 0; overflow: hidden; border-width: 6px; /*for i change at s*/ position: absolute; border-color:transparent #D7C36C transparent transparent; border-style:dashed solid dashed dashed; left:-12px; top:12px; z-index: 30; } s{ border-width: 5px; border-right-color: #FFFAD2; left: -10px; top: 13px; z-index: 40; } </style> </head> <body> <div class="cancel-reason"> <div class="reason-detail"><div>取消原因:<span>买家取消</span><p>买家不想买了</p></div></div> <i></i> <s></s> </div> </body> </html> demo实例: 取消原因: 买家取消 买家不想买了 test test test