<! Doctype HTML> <br/> <pead> <br/> <meta charset = "GBK"> <br/> <title> first grid demo </title> <br/> <style> <br/> body, button, input, select, textarea {<br/> Font: 12px/1.5 '', verdana, tahoma, Arial,/5b8b/4f53; /* followed by the Code */<br/>} <br/> 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 {<br/> margin: 0px; <br/> padding: 0px; <br/>}< br/> body {<br/> padding: 20px; <br/>}< br/>. cancel-reason {<br/> position: absolute; <br/> border-top: 1px solid # d7c36c; <br/> border-bottom: 1px solid # d7c36c; <br/>}< br/>. cancel-reason. reason-Detail {<br/> position: relative; <br/> border-left: 1px solid # d7c36c; <br/> border-Right: 1px solid # d7c36c; <br/> margin: 0px-1px; <br/> background-color: # fffad2; <br/> padding: 5px; <br/> width: 260px; <br/>}< br/>. reason-Detail Div {<br/> background-color: # ffffff; <br/> padding: 5px; <br/>}< br/>. cancel-reason span {<br/> color: #808080; <br/>}< br/>. cancel-reason P {<br/>/* Text-indent: 5em; Replace by margin-left: 5em for better */<br/> margin: 0px; <br/> padding: 0px; <br/> margin-left: 5em; <br/>}< br/> I, S {<br/> width: 0px; <br/> Height: 0px; <br/> font-size: 0px; <br/> line-Height: 0; <br/> overflow: hidden; <br/> border-width: 6px;/* For I change at S */<br/> position: absolute; <br/> border-color: transparent # d7c36c transparent; <br/> border-style: dashed solid dashed; <br/> left:-12px; <br/> top: 12px; <br/> Z-index: 30; <br/>}< br/> S {<br/> border-width: 5px; <br/> border-right-color: # fffad2; <br/> left:-10px; <br/> top: 13px; <br/> Z-index: 40; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <Div class = "cancel-reason "> <br/> <Div class =" reason-detail "> <div> reason for cancellation: <span> buyer canceled </span> <p> buyer does not want to buy </P> </div> <br/> <I> </I> <br/> <S> </S> <br/> </div> <br/> </body> <br/> </ptml>
Demo instance:
Reason for cancellation: buyer canceled
The buyer does not want to buy it.
Test
Test
Test