Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tip中的指示箭头实现 #50

Open
GoogleCodeExporter opened this issue Apr 3, 2015 · 0 comments
Open

Tip中的指示箭头实现 #50

GoogleCodeExporter opened this issue Apr 3, 2015 · 0 comments
Labels
auto-migrated Priority-Medium Type-Defect

Comments

@GoogleCodeExporter
Copy link 


<!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 [email protected] on 24 Apr 2012 at 3:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
auto-migrated Priority-Medium Type-Defect
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@GoogleCodeExporter