首先:一个例子:
#div1 {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
此代码的效果图为:
中间白色为宽高各为20px的div1。
那么问题来了,要实现三角号,只需将div宽高设置为0,然后只设置一边的border显示即可
代码如下:
#div2 {
height:0;
width:0;
overflow: hidden;
border:20px dashed transparent;
border-top:20px solid #FF9600;
}
问题:这样设置整个div的宽高是40*40;如果不想要多余占位,可设置border-width:20px 20px 0; border-style:solid; border-color:#ff9600 transparent transparent;( 等同于只设border-top-color:#ff9600;)
其次:再一个例子:
跟上面类似,width:0; height:0;border:20px dashed transparent; border-color:green red green red; border-width:0 20px 20px 20px;
样式如下:
如果有两边border-width:0;
样式如下:
做翻页效果时修改border-width值即可实现。