html尖角提示框的实现

Posted on 2013-08-23 16:14  xiangkezeng  阅读(961)  评论(0编辑  收藏  举报

<style type="text/css">
        .box {
            background-color: #bebf22;
            width: 200px;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .tip-content {
            padding: 0 10px;
            font: 14px/30px arial;
        }
        .angle {
            position: absolute;
            border: 10px solid transparent;
            _border-color: #fff;
            font-size: 0;
            border-bottom-color: #bebf22;
            left: 12%;
            top: -20px;
            _top: -22px;
        }
    </style>

 <div class="box">
        <span class="angle"></span>
        <span class="tip-content">some tip content is here!</span>
    </div>

Copyright © 2024 xiangkezeng
Powered by .NET 9.0 on Kubernetes