字号: - o +

用CSS的border属性实现小三角和尖角标签按钮

2012-10-19 前端开发 1人评论 42,961次浏览   

子曰:不要因为小小的争执,远离了你至亲的好友,也不要因为小小的恐惧(怨恨),忘记了别人的大恩 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

在网上经常看到类似这样尖角的效果~

实现的原理其实很简单,就是在一个宽高为0像素的块状元素中设置border属性,例如:

.box1{
	width:0px;
	height:0;
	border-top:50px solid #F00;
	border-right:50px solid #03F;
	border-bottom:50px solid #F90;
	border-left:50px solid #6C0;
}

效果就是下面这个样子…

想要知道为什么会出现这样的样子,那就要考验你的空间逻辑思维,自己去想吧~

点此查看效果1

现在有了四个三角了,再把除去要用到的三角以外的3个三角(border)设置成背景色就OK了。

其实实现起来很简单,只要把上下左3个三角的颜色都设置成背景色就OK了。

代码是这样的:

.box2{
	margin-top:10px;
	width:0px;
	height:0;
	border-top:50px solid #F1F1F1;
	border-right:50px solid #03F;
	border-bottom:50px solid #F1F1F1;
	border-left:50px solid #F1F1F1;
}

点此查看效果2

好,简单的小三角我们已经完成了,现在我们来实现一个尖角标签按钮,以向上尖角为例吧,然后再调整你需要的方向…

第一步:

用border设置背景

.to-top1{
	margin-top:10px;
	width:0px;
	height:0px;
	border:50px solid #03F;
}

我们再来看一下演示吧!

点此查看效果3

第二步:

把上下、左右的颜色用border-color设置成一样的,其中上下的颜色设置成背景色。

.to-top2{
	margin-top:10px;
	width:0px;
	height:0px;
	border:50px solid #03F;
	border-color:#03F #3B8DD1;
}

我们再来看一下演示吧!

点此查看效果4

第三步:

用border-width设置上面为0,去除上面的颜色

#ex-box .ex-to-top{
	width:0px;
	height:0px;
	border:50px solid #03F;
	position:relative;
}
#ex-box .ex-to-top .ex-totop{
	display:block;
	overflow:hidden;
	width:0px;
	height:0px;
	border:50px solid #03F;
	border-color:#03F #3B8DD1;
	border-width:0 50px 50px 50px;
	position:absolute;
	left:25px;
	top:0;
}

我们再来看一下演示吧!

点此查看效果6

第四步:

用绝对定位position:absolute调整位置,使其移到顶部。

#ex-box .ex-to-top1{
	margin-top:60px;
	margin-bottom:60px;
	width:0px;
	height:0px;
	border:50px solid #03F;
	position:relative;
}
#ex-box .ex-to-top1 .ex-totop1{
	display:block;
	overflow:hidden;
	width:0px;
	height:0px;
	border:50px solid #03F;
	border-color:#03F #3B8DD1;
	border-width:0 50px 50px 50px;
	position:absolute;
	left:25px;
	top:-100px;
}

我们再来看一下演示吧!

点此查看效果7

第五步:

在把移上去的左右三角border-color设置成背景色。

#ex-box .ex-to-top2{
	width:0px;
	height:0px;
	border:50px solid #03F;
	position:relative;
}
#ex-box .ex-to-top2 .ex-totop2{
	display:block;
	overflow:hidden;
	width:0px;
	height:0px;
	border:50px solid #03F;
	border-color:#03F #F1F1F1;
	border-width:0 50px 50px 50px;
	position:absolute;
	left:25px;
	top:-100px;
}

我们再来看一下演示吧!

点此查看效果8

到这里,基本的三角已经完成了,其他就是改变你需要的方向和美化样式了,这个我就不多说了。

好我们看一下最终的效果!

点此查看效果10

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论1

  1. 强悍,width:0px;height:0px;
    这个定义我记住了,嘿嘿

    萌嘟嘟01-09 11:38 回复

发表我的评论

*

*

取消