利用border 产生尖角
博客专区 > HonChy 的博客 > 博客详情
利用border 产生尖角
HonChy 发表于3年前
利用border 产生尖角
  • 发表于 3年前
  • 阅读 149
  • 收藏 7
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 在一些tip提示中,一般会有一个箭头,其实可以利用border来产生,而不必采用图片。
<!DOCType html>
<html>
<head>
<meta charset="utf8" />
<style type="text/css">
    .tip {
        position:relative;
        margin-left:4px;
        background-color:#ff4500;
        padding-left:5px;
        height:18px;
        line-height:18px;
        font-size:12px;
        color:#fff;
    }
    .tip .arrow{
        border-top:4px solid #fff;
        border-bottom:4px solid #fff;
        border-right:4px solid #ff4500;
        line-height:0px;
        position:absolute;
        left:-4px;
        top:5px;
    }
    
</style>
</head>
<body>
    <div class="tip">
        <div class="arrow"></div>
        <label>这是个提示</label>
    </div>
</body>
</html>


效果:

共有 人打赏支持
粉丝 12
博文 100
码字总数 87679
×
HonChy
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: