<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"> <!--向右的三角--> </div>
下面用CSS3分别实现向上、下、左、右的三角形
/*箭头向上*/ .arrow-up { 0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff; } /*箭头向下*/ .arrow-down { 0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; }
/*箭头向左*/ .arrow-left { 0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow; } /*箭头向右*/ .arrow-right { 0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green; }
好了原理我们了解了,那么我们就实战一下吧,来实现带小三角形的div框。
首先,写出html代码:
<div class="entry"> <div class="entry-trangle"><!--本Div只来实现三角形,无其他作用--></div> hello,我出生了<br/> hello,我出生了<br/> hello,我出生了<br/> hello,我出生了<br/> </div>
挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形,然后绝对定位、设置z-index:-1;、margin-left:-19px;,看下面css代码:
<style type="text/css"> *{margin:0;padding:0;} body{ background:#666; font:14px/20px "Microsoft YaHei"; } .entry{ margin:0 auto; margin-top:20px; 280px; background:#fff; padding:10px; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .entry-trangle{ position:absolute; margin-left:-19px; 0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #fff; z-index:-1; } </style>
border-radius:5px;用来实现圆角;绝对定位、
z-index:-1;的目的都是使控制小三角形的div在最底层,不影响父级div里面的内容布局。
原文链接:http://blog.aizhet.com/web/4382.html