saber 酱的抱枕

Fly me to the moon

10/30
2014
学习

css制作三角形

做三角形的要点:
1.div宽高必须为0;
2.边框颜色透明是透明,虽然看不到,但是不同于边框none哦;
3.line-height: 0;的设置是为了解决ie6空div有高度的bug;
4.ie6下设为透明的边框将显示为黑色...真是个可爱的小调皮~爆炸吧ie6!!!

好,接下来进入实战。以下皆为代码实现哦~

首先是向上的三角形,设置其底边框的可见样式,其他三条边框为透明。

为什么这样就能出来三角形了呢?我们把四条边框全部设为可见就明白了

我们给div加上宽高再看,才发现原来边框并非是我们所想的四个长条。如果把下面div的宽高归零,四条边框自然就有重合点——变成四个三角形了。

平时我们不知道这个事实,大概是因为我们经常把边框设置为同一种颜色的原因,那样当然就以为四条边就是四条直线拼一起了呢

明白了这个道理,我们可以随意调♂教这四条边了:

 

现在,不管是上下左右还是四个斜角,你还能说你不会吗?

上面的斜三角是用两个三角形拼起来的,因此看起来明显比较大。实际上可以用一个小三角的面积显示的,那就是随意挑选两个相邻的纵向边框和横向边框,将其中一个设为透明,一个设为可见色,另外两条边框设置为none就可以了。两条边框各占据了矩形的一半。

看下面的太极图,你能想到它是用圆角、定位、边框组合出来的吗?进阶地址

Read More →

css制作三角形