纯CSS样式实现小三角图标（css小三角位置）

很多时候我们需要用户点击后界面某个元素后出现弹出菜单，或者弹出文本提示框等，都需要有一个小小的三角来指向用户操作的地方，下面我的方法只需要写css，完全不需要引入图片即可实现，而且不用担心分辨率问题，下面我们就来看看如何实现吧。

首先我们需要两个标签：

然后开始写css：

效果图：

原理：

父元素是文本内容容器，里面的子元素是小三角的父容器，然后给这个div设置一个before伪元素，来构造一个正方形，然后通过css3的transform：rotate(45deg)设置进行旋转，然后通过position：absolute的top值来控制小三角的位置，最后通过小三角父元素的overflow：hidden设置元素内容溢出隐藏的效果，就达成了小三角的视觉效果，是不是很easy，so快去尝试吧~