如何用CSS制作带小三角提示框

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 347 | 阅读时长 ≈ 1 分钟

两个三角形定位实现

See the Pen kXAZOk by abcdGJJ (@abcdGJJ) on CodePen.

原理

  1. 构造两个三角形，定位属性为绝对定位。
  2. 第一个三角形的border颜色设为父元素border颜色
  3. 第二个三角形的border颜色与父元素背景颜色相同
  4. 第一个三角形top值比第二个三角形大1px
  5. 这种方法有一个缺点，三角形的颜色比边框颜色淡一些，如果想得到和边框一样的颜色，可以将第一个三角形颜色加深一些
  6. 也可用伪类元素实现，:before、:after

11.12日更新：使用CSS3实现

div旋转实现

原理

使用rotate属性，让div旋转-45°，并且只有上边框和右边框有颜色

See the Pen mOPeRK by abcdGJJ (@abcdGJJ) on CodePen.