AlisaClass 2014-04-23
1.用纯css绘制带三角型的气泡框,不适合用图片
2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分。
例子:先画一个三角吧
.dr{ width:0px; height:0px; border:10px solid black; border-bottom:10px solid red; } <div class=dr></div>
结果:
(1)当我们想要绘制朝上着上方的小三角,只要把黑色区域改为白色或透明即可。border:10px solid transparent 或:border:10px solid #fff
(2)尖朝上的三角形 设置 border-bottom 所以朝左border-right 朝右 border-left 朝下 border-top
3.我们已经绘画了三角型,但是我们要的是三角形边框,改怎么做呢?
思路:外边是一个实的三角形,用上面的方法绘制,里面在做一个小三角形叠在里面,颜色是白色,比外面的三角形小一点点,这样不就留下框了么。
<style> .content{ width:0px; height:0px; border:10px solid black; border-bottom:10px solid red; } .inner{ width:0px; height:0px; border:10px solid yellow; border-bottom:10px solid red; } </style> </head> <body> <div class="content"> <div class="inner"> </div> </div> </body>
4.经过大神的点播,利用:before和after 来实现这个更方便些
<style> .content{ width:0px; height:0px; border:10px solid transparent; border-bottom:10px solid red; margin-left:10px; } .content:after{ content:""; display:block; width:0px; height:0px; border:10px solid transparent; border-bottom:10px solid white; position:relative; top:-9px; left:-10px; } </style>
结果: