css3三角形兼容_CSS3—三角形

话不多说看效果：演示效果，runjs

1.加了宽高和border，边用不同颜色显示，每条边都是一个梯形

2.去掉宽高，每条边都是三角形

3.只显示其中一条边就是不同的三角形了,是不是很简单，改变border四条边宽度试试吧~

上述代码如下：

css3—三角形

.dib{display: inline-block;}

.triangle0{

width:40px;

height:40px;

border-top:40px solid yellow;

border-right:40px solid black;

border-bottom:40px solid pink;

border-left:40px solid red;

}

.triangle1{

width:0px;

height:0px;

border-top:40px solid yellow;

border-right:40px solid black;

border-bottom:40px solid pink;

border-left:40px solid red;

}

.trianglet{

width:0;

height:0;

border-top:40px solid yellow;

border-right:40px solid transparent;

border-left:40px solid transparent;

border-bottom:40px solid transparent;

}

.triangler{

width:0;

height:0;

border-top:40px solid transparent;

border-right:40px solid black;

border-bottom:40px solid transparent;

border-left:40px solid transparent;

}

.triangleb{

width:0;

height:0;

border-top:40px solid transparent;

border-right:40px solid transparent;

border-bottom:40px solid pink;

border-left:40px solid transparent;

}

.trianglel{

width:0;

height:0;

border-top:40px solid transparent;

border-right:40px solid transparent;

border-bottom:40px solid transparent;

border-left:40px solid red;

}

CSS3 三角形运用

酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...

酷酷的CSS3三角形运用

概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...

【转载】酷酷的CSS3三角形运用

转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...

CSS中的一下小技巧1之CSS3三角形运用

使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

css3三角形冒泡泡图形制作

图一: 图二:

css 三角形