GitHub 博客园 Nanakon

【html】三角

用css的border属性实现三角 by 渔人码头
http://www.css88.com/archives/1875
Tip中小三角的实现 by 渔人码头
http://www.css88.com/archives/3904
Tip中的指示箭头实现 by 渔人码头
http://www.css88.com/archives/4557

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <style type="text/css">
    .tips{ position:absolute; padding:10px; border:1px solid #ffba00; background:#fff8e8; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
    .diamond{ position:absolute; display:block; width:8px; height:8px; font-size:0; background:#fff8ef; -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-top{ border-left:1px solid #ffba00; border-top:1px solid #ffba00; top:-5px; top:-6px\9; _top:-7px; left:10px;}
    .tips-bottom{ border-right:1px solid #ffba00; border-bottom:1px solid #ffba00; bottom:-5px; bottom:-6px\9; _bottom:-7px; left:10px;}
    .tips-left{ border-left:1px solid #ffba00; border-bottom:1px solid #ffba00; left:-5px; left:-6px\9; _left:-7px; top:10px;}
    .tips-right{ border-right:1px solid #ffba00; border-top:1px solid #ffba00; right:-5px; right:-6px\9; _right:-7px; top:10px;}
    </style>
    <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>
</body>
</html>

posted on 2012-07-05 10:46  jzm17173  阅读(184)  评论(0)  编辑  收藏  举报

导航

轻音