提示框的箭头实现——css揭秘读书笔记及实战

![ARWZGD]N9IS13T~BG$5YHRW.png](http://upload-images.jianshu.io/upload_images/1681524-73755250ebe10f8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

提示框箭头实现

效果图如下


提示框的箭头实现——css揭秘读书笔记及实战_第1张图片
箭头.png

代码




  
  
  demo
  



  
WTF?

效果图

提示框的箭头实现——css揭秘读书笔记及实战_第2张图片
RI$)效果图.png

总结

核心还是使用伪元素before做一个正方形然后用transform旋转得到一个菱形并用绝对定位移动到自己想要的位置,可以看下图。

提示框的箭头实现——css揭秘读书笔记及实战_第3张图片
伪元素设置为红色后.png

你可能感兴趣的:(提示框的箭头实现——css揭秘读书笔记及实战)