带箭头的对话框实现（百度笔试题）

最新推荐文章于 2023-07-26 17:32:53 发布

Maci_yera

最新推荐文章于 2023-07-26 17:32:53 发布

阅读量786

点赞数

分类专栏： css 文章标签：对话框 css

本文链接：https://blog.csdn.net/maci_yera/article/details/78112023

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

需要的样式数据：
这里写图片描述
下面是我实现的代码：

<style type="text/css">
        #demo{
            width: 100px;
            height: 100px;
            border-radius: 1px;
            border:2px solid #000;
            position: relative;
        }
        #demo::after{
            content: "";
            width: 14px;
            height: 14px;
            border-top: 2px solid #000;
            border-right: 2px solid #000;
            background-color: #fff;
            -webkit-transform:rotateZ(45deg);
            transform:rotateZ(45deg);
            position: absolute;
            left:94px;
            /*left=90时候 是不算border的 90+4是正确的*/
            top:32px;
            /*left=2才是要求的距离顶部为0*/
        }
    </style>
</head>
<body>
<div id="demo"></div>
</body>

最后代码效果如下：
这里写图片描述
实现思路：
使用::after添加一个方块，上右border黑色，然后旋转45度放在图示位置挡住原本的border;
要点：关于top,left的数据问题，需要考虑边界，正常认为是top:30px;left:90px;但是实际却会偏移，这是因为border的原因，需要把自身的border也考虑在内。

Maci_yera

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
带箭头的对话框实现（百度笔试题）

需要的样式数据：下面是我实现的代码：<style type="text/css"> #demo{ width: 100px; height: 100px; border-radius: 1px; border:2px solid #000; position
复制链接

扫一扫

专栏目录