【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>

你可能感兴趣的:(html)