这阵子在作一个web端项目中遇到一个问题,须要实现带箭头的选项卡点击可切换。起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位。这种方法是可行的,可是由于手机和电脑的屏幕显示图片的画质细节不一样,致使1px的边框比1px的切图实际粗不少,对于有强迫症的人来讲内心老是不舒服的……后来我就想,屁大点的箭头直接用css写一个算了。但是之前没写过,那就研究一下吧。网上有不少这方面的资料,可是仍是那句话,那都是人家的不是本身的,要想据为己有本身也写篇博客吧。css
这种纯css没有兼容性的问题,无需切图,甚至没有用到CSS3,对各类浏览器支持良好。html
基本原理:控制盒子模型的宽度高度和边框的显示隐藏,以及改变某一条边的颜色。web
从梯形入手:浏览器
当元素宽、高和边框的宽相等时,改变某一边的颜色能够看到一个梯形;ide
<span class="ladder"></span> <style type="text/css"> .ladder{ border:10px solid transparent; border-left:10px #f00 solid; width:10px; height:10px; display: inline-block; } </style>
三角形:post
当元素宽、高为零,且其余边为透明颜色时,能够形一个三角形。学习
向上的三角形:<span class="triangle-up"></span> 向下的三角形:<span class="triangle-down"></span> 向左的三角形:<span class="triangle-left"></span> 向右的三角形:<span class="triangle-right"></span> <style type="text/css"> .triangle-up{ border: 20px solid transparent; border-bottom: 20px solid #f00; width:0; height:0; } .triangle-down{ border: 20px solid transparent; border-top: 20px solid #f00; width:0; height:0; } .triangle-left{ border:20px solid transparent; border-right:20px solid #f00; width:0; height:0; } .triangle-right{ border:20px solid transparent; border-left:20px solid #f00; width:0; height:0; } </style>
经过不一样颜色的两个元素覆盖能够造成三角线。url
<span class="triangle02"> 向上的三角线: <span class="pot01"></span> <span class="pot02"></span> </span> <span class="triangle02"> 向下的三角线: <span class="pot03"></span> <span class="pot04"></span> </span> <span class="triangle02"> 向左的三角线: <span class="pot05"></span> <span class="pot06"></span> </span> <span class="triangle02"> 向右的三角线: <span class="pot07"></span> <span class="pot08"></span> </span> <style type="text/css"> .triangle02{ width:200px; height:100px; display: inline-block; position: relative; } .triangle02 span { width: 0; height: 0; font-size: 0; overflow: hidden; position: absolute; } .pot01{ border-width: 20px; border-style: dashed dashed solid ; border-color: transparent transparent #f00 ; left: 100px; top: 0; } .pot02{ border-width: 20px; border-style: dashed dashed solid ; border-color: transparent transparent #fff ; left: 100px; top: 2px; } .pot03{ border-width: 20px; border-style: solid dashed dashed; border-color: #f00 transparent transparent; left: 100px; top: 2px; } .pot04{ border-width: 20px; border-style: solid dashed dashed; border-color: #fff transparent transparent; left: 100px; top: 0; } .pot05{ border-width: 20px; border-style: dashed solid dashed dashed; border-color: transparent #f00 transparent transparent; left: 100px; top: 2px; } .pot06{ border-width: 20px; border-style: dashed solid dashed dashed; border-color: transparent #fff transparent transparent; left: 102px; top: 2px; } .pot07{ border-width: 20px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #f00; left: 100px; top: 2px; } .pot08{ border-width: 20px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #fff; left: 98px; top: 2px; } </style>
那么带箭头的提示框就简单了,只须要外层加个边框,用相对和绝对定位就能够实现。spa
<div class="box"> <span class="top01"></span> css实现箭头对话框 </div> <style type="text/css"> .box { width: 300px; padding: 30px 20px; border: 5px solid #666; position: relative; margin:30px auto; } .box span { width: 0; height: 0; font-size: 0; overflow: hidden; position: absolute; } .box span.top01 { border-width: 20px; border-style: dashed dashed solid ; border-color: transparent transparent #666; left: 20px; bottom: 81px; } </style>
<div class="box"> <span class="bot"></span> <span class="top"></span> css实现气泡对话框 </div> <style type="text/css"> .box { width: 300px; padding: 30px 20px; border: 5px solid #666; position: relative; margin:30px auto; } .box span { width: 0; height: 0; font-size: 0; overflow: hidden; position: absolute; } .box span.bot { border-width: 20px; border-style: dashed dashed solid ; border-color: transparent transparent #666 ; left: 100px; bottom: 85px; } .box span.top { border-width: 20px; border-style: dashed dashed solid ; border-color: transparent transparent #ffffff; left: 100px; bottom: 78px; } </style>
要实现我需求再结合js就行啦。code
在这里,我把学习过程当中参考的文章标注一下供你们学习: