Tip中的指示箭头实现


<!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
silvadias22 / snippely

Tip中的指示箭头实现 #50
