Open GoogleCodeExporter opened 9 years ago
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tip中的指示箭头实现</title> <style> *{padding:0;margin:0;} body{padding:20px;font:16px/1.5 Georgia;} .diamond{ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand' ); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform:rotate(45deg); } :root .diamond{filter:none\9;}/*ie9 hack*/ .tips{position:absolute;background: #fff8e8;border:1px solid #ffba00;padding:10px;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .tips-top{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-top:1px solid #ffba00;top:-5px;top:-6px\9;_top:-7px;left:10px;} .tips-bottom{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-right:1px solid #ffba00;border-bottom:1px solid #ffba00;bottom:-5px;bottom:-6px\9;_bottom:-7px;left:10px;} .tips-left{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-left:1px solid #ffba00;border-bottom:1px solid #ffba00;left:-5px;left:-6px\9;_left:-7px;top:10px;} .tips-right{position:absolute;display:block;width:8px;height:8px;font-size:0;background:#fff8ef;border-right:1px solid #ffba00;border-top:1px solid #ffba00;right:-5px;right:-6px\9;_right:-7px;top:10px;} </style> </head> <body> <div class="tips"> <div class="tips-text"> Lorem ipsum dolor sit amet. </div> <div class="tips-top diamond"></div> <div class="tips-bottom diamond"></div> <div class="tips-left diamond"></div> <div class="tips-right diamond"></div> </div> <!-- .tips --> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-3448069-1"); pageTracker._trackPageview(); } catch(err) { }</script> </body> </html>
Original issue reported on code.google.com by icareu....@gmail.com on 24 Apr 2012 at 3:39
icareu....@gmail.com
Original issue reported on code.google.com by
icareu....@gmail.com
on 24 Apr 2012 at 3:39