css三角形伪类制作箭头指示
上一章写了三角形多个角度的代码, 现在根据那些个三角形写一个箭头,在实际工作中 TAB的时候有的是需要指向类的箭头标识的,
有的聊天信息中也需要这个。我整理了下 我用的时候写的。
css:
.div-block:before { content: ''; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 9px solid #eee; position: absolute; top: 25px; left: -9px; } .div-block:after { content: ''; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #fbfdfb; position: absolute; top: 27px; left: -7px; } .div-block { width:300px; padding: 20px 15px; line-height: 25px; margin-top: -2px; margin-left: 32px; margin-right: 32px; border-radius: 3px; position: relative; background: #fbfdfb; border: 1px #dfdfdf solid; font-size: 15px; }
html:
<div class="div-block">内容内容 </div>
可以复制了放到代码里去试试,至于 箭头的位置,自己去换成自己想要的就行