前几天在浏览一个网站时,看到了一个常见的会话框右边显示箭头界面。当时自己就想了想,如果自己来实现,应该就是我以前写的文章中的使用before和after伪元素创建两个三角形来相互重叠覆盖实现。抱着试试看的心态,看了下网站的实现,结果还是有些收获的,下面将我的收获写下来。
实现效果如下
简单描述下具体的实现原理,就是使用伪元素before以及CSS3中的transform实现的。
<style>
.wrap{
margin: 50px;
padding: 20px;
display: inline-block;
border: 1px solid #ccc;
position: relative;
}
.wrap::before{
position: absolute;
display: inline-block;
content: '';
width: 10px;
height: 10px;
border: 1px solid #ccc;
border-bottom: 0;
border-right: 0;
background-color: #fff;
transform: rotate(-45deg);
left: -6px;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="wrap">
123
</div>
这个方法要比使用before和after重叠简单多了!