比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿

CSS Code复制内容到剪贴板

.triangle{

height:0;

width:0;

overflow:hidden;

font-size:0;

line-height:0;

border-color:#ff0000#ffff00#0000ff#008000;

border-style:solid;

border-width:40px40px40px40px;

}

效果如下：

四个三角形合成一个正方形，大小为80x80，如果我们只想保留其中某个三角形的话，将其它的设置为透明即可，比如(以下css未改变部分与上面相同)

CSS Code复制内容到剪贴板

.triangle{

border-color:#ff0000transparenttransparenttransparent;

border-width:40px40px40px40px;

}

效果：

IE6不支持transparent，所以不会透明而会显示难看的黑色，不过也有解决方法：将透明的部分对应的border-style设为dashed即可

CSS Code复制内容到剪贴板

.triangle{

border-color:#ff0000transparenttransparenttransparent;

border-style:soliddasheddasheddashed;

border-width:40px40px40px40px;

}

正方形按对角线平分为两个三角形的情况

CSS Code复制内容到剪贴板

.triangle{

border-color:#ff0000#ffff00#0000ff#008000;

border-style:solid;

border-width:0040px40px;

}

CSS Code复制内容到剪贴板

.triangle{

border-color:#ff0000#ffff00#0000ff#008000;

border-style:solid;

border-width:040px40px0;

}

需要指出的是，此时正方形的大小为40x40

如果将border-width的某一边设为0又会怎么样呢？也算是两种情况

CSS Code复制内容到剪贴板

.triangle{

border-color:#ff0000#ffff00#0000ff#008000;

border-style:solid;

border-width:40px40px040px;

}

CSS Code复制内容到剪贴板

.triangle{

border-color:#ff0000#ffff00#0000ff#008000;

border-style:solid;

border-width:40px40px40px0;

}

结果是长方形，其中一边为80一边为40。宽度被设为0的边框对应方向的边框会形成较大的三角形，且长度加倍

segmentfault的"采纳"的显示其实也是用三角形实现的

上部分是包含'采纳'两个字的块状元素，设置position: relative。下部分用伪类after设置一个position: absolute的块状元素，将两者接在一起。通过border-width设置成长方形而不是正方形，再将下方的三角形去掉即可，看下面的css十分明显，这也是三角形的一个很好的应用

CSS Code复制内容到剪贴板

.accepted-flag:after{

position:absolute;

left:0;

top:25px;

content:'';

border-width:9px18px;

border-style:solid;

border-color:#009a61#009a61transparent#009a61;

}

HTML5 Canvas

在你的HTML文件中有以下的canvas元素：

XML/HTML Code复制内容到剪贴板

<canvasid="triangle"height="100"width="100">Triangle</canvas>

这里的如何使用JavaScript绘制一个三角形：JavaScript Code复制内容到剪贴板

varcanvas=document.getElementById('triangle');

varcontext=canvas.getContext('2d');

context.beginPath();

context.moveTo(0,0);

context.lineTo(100,0);

context.lineTo(50,100);

context.closePath();

context.fillStyle="rgb(78,193,243)";

context.fill();

SVG (Scalable Vector Graphics)

这是如何在您的标签，你可以定义一个内联SVG三角形：

XML/HTML Code复制内容到剪贴板

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"class="svg-triangle">

<polygonpoints="0,0100,050,100"/>

</svg>

然后，只需添加一些样式：

CSS Code复制内容到剪贴板

.svg-triangle{

margin:0auto;

width:100px;

height:100px;

}

.svg-trianglepolygon{

fill:#98d02e;

stroke:#65b81d;

stroke-width:2;

}