利用border 产生尖角

最新推荐文章于 2021-06-19 01:50:14 发布

weixin_34109408

最新推荐文章于 2021-06-19 01:50:14 发布

阅读量265

点赞数

原文链接：https://my.oschina.net/honchy/blog/394438

版权

为什么80%的码农都做不了架构师？>>>

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

效果：