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

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

实现的原理其实很简单，就是在一个宽高为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

 

 

原文链接：http://w3cshare.com/css-border/