css实现tooltips框的三角角标两种方法：伪类和C3旋转

最新推荐文章于 2023-09-20 08:52:36 发布

IceYang-

最新推荐文章于 2023-09-20 08:52:36 发布

阅读量3.2k

点赞数 1

分类专栏： css类点文章标签： css3 三角 tooltips 伪类

本文链接：https://blog.csdn.net/YangBingX/article/details/78355252

版权

css类点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

一、皆为边框

第一种 Css的border取其一为三角
第二种 C3新属性旋转（transform:rotate(45deg);）

二、皆为阴影（采用C3旋转）

完整代码整个复制即可查看效果

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css实现tooltips框的三角角标</title>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            display:inline-block;
        }
        .tooltips1,
        .tooltips2,
        .tooltips3 {
            width: 200px;
            height: 80px;
            background: #fbfbfb;
            border: 1px solid #d5d5d5;
            border-radius: 10px;
            margin: 50px;
            position: relative;
        }

            .tooltips1:after {
                position: absolute;
                left: -18px;
                top: 20px;
                border-left: 9px solid transparent;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid #fbfbfb;
                content: '';
            }

            .tooltips1:before {
                position: absolute;
                left: -19px;
                top: 20px;
                border-left: 9px solid transparent;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid #d5d5d5;
                content: " ";
                display: block;
                width: 0;
                height: 0;
            }

            .tooltips2:after {
                position: absolute;
                right: -18px;
                top: 20px;
                border-left: 9px solid #fbfbfb;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid transparent;
                content: '';
            }

            .tooltips2:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                position: absolute;
                right: -19px;
                top: 20px;
                border-left: 9px solid #d5d5d5;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
                border-right: 9px solid transparent;
            }

            .tooltips3:before {
                transform: rotate(45deg);
                content: " ";
                display: block;
                width: 10px;
                height: 10px;
                position: absolute;
                left: 20px;
                top: -6px;
                background: #fbfbfb;
                border-left: 1px solid #d5d5d5;
                border-top: 1px solid #d5d5d5;
            }

        .tooltips {
            width: 200px;
            height: 80px;
            background: #fff;
            border-radius: 10px;
            margin: 50px;
            position: relative;
            box-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
            padding:10px;
        }
        .tooltips:before {
            transform: rotate(45deg);
            content: " ";
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            background: #fff;
            /*right: 30px;
            top: -5px;
            box-shadow: #d4d4d4 -1px -1px 5px;*/
        }

        .tooltips:after {
            content: " ";
            display: block;
            width: 16px;
            height: 7px;
            position: absolute;
            /*right: 27px;
            top: 0px;*/
            background: #fff;
        }   
        /*top*/
        .tooltips.top:before{
            right: 30px;
            top: -5px;
            box-shadow: #d4d4d4 -1px -1px 5px;
        }
        .tooltips.top:after{
            right: 27px;
            top: 0px;
        }
        /*bottom*/
        .tooltips.bottom:before{
            right: 30px;
            bottom: -5px;
            box-shadow: #d4d4d4 1px 1px 5px;
        }
        .tooltips.bottom:after{
            right: 27px;
            bottom: 0px;
        }
        /*left*/
        .tooltips.left:before{
            left: -5px;
            top: 20px;
            box-shadow: #d4d4d4  -1px 1px 5px;
        }
        .tooltips.left:after{
            width: 7px;
            height: 16px;
            left: 0;
            top: 17px;
        }
        /*right*/
        .tooltips.right:before{
            right: -5px;
            top: 20px;
            box-shadow: #d4d4d4 1px -1px 5px;
        }
        .tooltips.right:after{
            width: 7px;
            height: 16px;
            right: 0;
            top: 17px;
        }
    </style>
</head>
<body>

    <div class="tooltips1"></div>
    <div class="tooltips2"></div>
    <div class="tooltips3"></div>

    <br />

    <div class="tooltips top">人之初 性本善 性相近 习相远</div>
    <div class="tooltips bottom">人之初 性本善 性相近 习相远</div>
    <div class="tooltips left">人之初 性本善 性相近 习相远</div>
    <div class="tooltips right">人之初 性本善 性相近 习相远</div>
</body>
</html>

IceYang-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现tooltips框的三角角标两种方法：伪类和C3旋转

一、皆为边框第一种 Css的border取其一为三角第二种 C3新属性旋转（transform:rotate(45deg);）二、皆为阴影（采用C3旋转）完整代码整个复制即可查看效果html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ti
复制链接

扫一扫