转自:http://blog.aizhet.com/web/4382.html
首先我们来看一下CSS3实现三角形原理:其实就是对于transparent的应用
假如html代码是这样的
<div class="arrow-up">
<!--向上的三角-->
</div>
<div class="arrow-down">
<!--向下的三角-->
</div>
<div class="arrow-left">
<!--向左的三角-->
</div>
<div class="arrow-right">
<!--向右的三角-->
</div>
下面用CSS3分别实现向上、下、左、右的三角形
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
ok代码整理在一起后,效果大概是这样的:
好了原理我们了解了,那么我们就实战一下吧,来实现带小三角形的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;
width:280px;
background:#fff;
padding:10px;
/*设置圆角*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.entry-trangle{
position:absolute;
margin-left:-19px;
width: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里面的内容布局。