单标签实现气泡三角形

Posted 2020-09-23 乐少007

单标签实现气泡三角形

tooltip  popup气泡弹出层

这是悬浮的时候，经常出现的  气泡三角

 

<style>
.comment {
width: 150px;
height: 35px;
position: relative;
margin: 30px auto 0;
background: #f8ac09;
border-radius: 5px;
}

.comment:after {
content: \'\';
width: 0;
height: 0;
position: absolute;
top: 5px;
left: -16px;
border: solid 8px;
border-color: transparent transparent transparent #f8ac09;
transform: rotate(-180deg);
-ms-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
font-size: 0;
}
</style>

 

<div class="comment"></div>

 

即可实现，使用伪类元素实现三角形。

参考了网络很多资源，大漠的和旭神的网站有很多精讲的。

下载链接http://files.cnblogs.com/files/leshao/%E5%8D%95%E6%A0%87%E7%AD%BE%E5%AE%9E%E7%8E%B0%E4%B8%89%E8%A7%92%E6%B0%94%E6%B3%A1.rar