如何用css3的transform和before伪元素制作一个popover

最新推荐文章于 2024-09-18 15:34:24 发布

转载最新推荐文章于 2024-09-18 15:34:24 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/855913/blog/132743

文章标签：

#python

本文介绍了一种使用CSS before伪元素及transform属性实现三角形提示框的方法。通过简单的代码示例展示了如何仅用少量CSS就能创建一个带有突出三角标识的div元素。

2019独角兽企业重金招聘Python工程师标准>>>

最终结果如下图：

最终结果图

全部dom元素就是一个div，这里采用了两个小技巧，很简单的实现了这个效果，一个是before伪元素，前面的小尖尖就是这个伪元素，再利用第二个技巧，用transform将这个尖尖伪元素旋转45度角，就实现了所需要的效果，通过位置调整，将这个尖尖放置到合适位置就大功告成了。

演示见runjs：http://runjs.cn/detail/i5ndsy02

下面将两个css中关键的属性说明一下：

.popover {
position: relative; /* 因为需要绝对定位子元素（这里就是伪元素），所以需要将其设置为相对对位 */
background-color: white;
width: 150px;
height: 200px;
margin: 10px auto;
}

.popover::before { /* 伪元素其实和普通元素没多大区别 /
position: absolute; / 绝对定位 /
content:' '; / 伪元素需要有个content，这里设了一个空格占位 /
-webkit-transform: rotate(45deg); / 旋转45度 /
left: -9px; / 把这个小尖尖突出来 /
top: 20px; / 往下挪一点点 /
width: 20px; / 20x20的一个元素 */
height: 20px;
background-color: white;
}