CSS小技巧之:after和:before制作小三角和tips提示框-智言个人博客

首先，我的思路就想设计一个这样的：（下图）

于是我就开始设计，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <style media="screen">
            .demo2{width: 400px; height: 400px; position: relative; background-color: #eaf0f2;margin-top: 50px;}

            .demo2 a{
                text-decoration: none;
                transition:0.5;
                display: inline-block;
                font-family: '微软雅黑';
                color: #fff;
                padding: 5px 10px;
                background-color: #369;
                margin: 0 5px;
           }
           //构建tips整体小框框
           .demo2 a:hover::after{
               content: attr(title);
               position: absolute;
               top: -30px;
               width: 100px;
               background-color: red;
               left: 0;
               font-size: 12px;
               padding: 3px 10px;
               border-top-left-radius: 3px 50px;
               border-bottom-left-radius: 50px 3px;
            }
           //构建tips小框框下的三角形
           .demo2 a:hover::before{
               content: '';
               position: absolute;
               width: 0;
               height: 0;
               left: 10px;
               top: -10px;
               border-top: 10px solid red;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent;
           }


         </style>
     </head>
<body>
     <div class="demo2">
         <a href="#" title="我是一个介绍" >首页</a><a href="#" title="我是什么">第二页</a>
     </div>
</body>
</html>

DEMO地址：https://www.asni.cn/demo/demo2/index.html