CSS3实现三角形

页面展示时,有很多地方能用到三角形或是箭头,下面介绍下如何用CSS3来实现三角形或箭头。学习之前,先让我们来研究下border这个属性。

先来看下border原理:

<div class=”border-full”></div>

给border-full赋予样式,给四个边分别赋予不同的颜色:

.border-full{

width: 60px;

height: 60px;

border-left: 60px solid  blue;

border-right: 60px solid  red;

border-bottom: 60px solid  pink;

border-top: 60px solid green;

}

返回效果:

 

20150907143357

通过上图就很明显看到矩形的四个边是什么样式的 了。下面我们把矩形的高和宽设置为0;

<div class=”border-empty”></div>

然后给这个div赋予样式:

.border-empty{

width: 0;

height: 0;

border-left: 60px solid  blue;

border-right: 60px solid  red;

border-bottom: 60px solid  pink;

border-top: 60px solid green;

}

返回的结果如下图:

20150907143839

通过上图可以看出,当矩形宽和高为0时,四条边表现出来的形式就是一个三角形。

然后我们就可以来定义不同方向的三角形,只要把其他三边的颜色设置为透明或是transparent就可以了,当然,三角形不一定是正三角形,只要更改其他边的border-width值就可以修改三角形的边长。

下面我们来做一个向上的三角形:

<div class=”arrow-up”></div>

这个三角形的样式可以写成:

.arrow-up{

width: 0;

height: 0;

border-left: 60px solid  transparent;

border-right: 60px solid  transparent;

border-bottom: 60px solid  pink;

}

也可以这么简写:

.arrow-up{

width: 0;

height: 0;

border: 60px solid rgba(0,0,0,0);

border-bottom-color:pink;

}

返回结果如下:

20150907144944

延伸:箭头

通过上面了解了三角形的实现后,下面了解下箭头的实现。

思路一:

设置两个三角形,外围的三角形比内部的三角形大一点,让内部的三角形颜色个背景颜色一致,这样两个嵌套一起就形成了一个箭头。

HTML代码:

<div style="position:relative; width:100%;">
<span class="arrow-up-out"></span>
<span class="arrow-up-inner"></span>
</div>

CSS样式:

.arrow-up-out,.arrow-up-inner{ position:absolute;left:50%; display:inline-block; width:0; height:0;}
.arrow-up-out{ border-left:61px solid transparent;border-right:61px solid transparent;border-bottom:61px solid red;}
.arrow-up-inner{border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:60px solid white; margin-left:1px;top:1px;}

返回结果:

20150907150153

 

思路二:

跟思路一类似,只不过用了伪类before 和after来替代两个span。

HTML代码:

<div style="position:relative; width:100%; ">
<span class="arrow-up-border"></span>
</div>

 

CSS样式:

.arrow-up-border::before,.arrow-up-border::after{ position:absolute;left:50%;width:0; height:0;display:inline-block; content:" ";}
.arrow-up-border::before{ border-left:61px solid transparent;border-right:61px solid transparent;border-bottom:61px solid red;}
.arrow-up-border::after{border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:60px solid white; margin-left:1px;top:1px;}

返回效果跟上面一致:

20150907150153

通过上面的学习,你可以把三角形或箭头应用到其他元素里了,比如下面的:

20150907150612

20150907150619