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

来源：互联网发布：cf聊天软件下载编辑：程序博客网时间：2024/06/06 19:33

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

<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也考虑在内。

阅读全文

0 0