气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示： 拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后 ...

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示： 拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后 ...

效果： 思路： 用css写出来一个较大三角形（下图中蓝色），再写一个小三角(红)去遮盖大三角 ，漏出尖的一部分 ==》 如果用CSS实现一个三角形呢？ 给一个元素四周都加上边框的话， 形状为： 生成一个三角形可以写为： .box2 ...

前提：气泡框或者提示框是网页很常见的，实现它的方式有很多，我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置，但是用这种方式维护很麻烦，比如设计师想改成另外一种或者另外一种颜色 那我们只有再次切图片等。下面我们来学习下使用html+css来实现这种效果！ 如下效果 ...

网上也有很多的案例，这里也只是以自己的方法实现。 原理，还是比较简单的。 只是半透明的那个案例，遇到了些问题，最终还是选择避开问题的方法解决 ...

本人是一个前端的新手，记录一下自己的成长过程，文章写得内容都很low，希望能各位大牛看到后能指点一下文章和代码的问题。 在做一个练手的项目，遇到一个很常用的场景：把鼠标放在头像框上弹出一个气泡，显示更多内容。记录一下实现这个功能的过程： 首先要解决的就是气泡框的效果，这个很容易实现，设置 ...

先上代码： 效果图： 主要运用的是1.border 组成的直角三角形。2，before 和 after 伪元素 。3，z-index属性 1. 将元素 ...

我分别用了算是两种方法写了实心对话框，和边框对话框。具体方法如下 css代码，箭头方向被注释，需要的可以直接粘贴试试 渲染页面 ...