由 dawei 副标题#e#
比较简单实用的还是使用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: 40px 40px 40px 40px;
}
效果如下：
四个三角形合成一个正方形，大小为80x80，如果我们只想保留其中某个三角形的话，将其它的设置为透明即可，比如(以下css未改变部分与上面相同)
CSS Code复制内容到剪贴板
.triangle {
border-color: #ff0000 transparent transparent transparent;
border-width: 40px 40px 40px 40px;
}
效果：
IE6不支持transparent，所以不会透明而会显示难看的黑色，不过也有解决方法：将透明的部分对应的border-style设为dashed即可
CSS Code复制内容到剪贴板
.triangle {
border-color: #ff0000 transparent transparent transparent;
border-style: solid dashed dashed dashed;
border-width: 40px 40px 40px 40px;
}
正方形按对角线平分为两个三角形的情况
CSS Code复制内容到剪贴板
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 0 0 40px 40px;
}
CSS Code复制内容到剪贴板
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 0 40px 40px 0;
}
需要指出的是，此时正方形的大小为40x40
如果将border-width的某一边设为0又会怎么样呢？也算是两种情况
CSS Code复制内容到剪贴板
.triangle {
#p#副标题#e#
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 40px 40px 0 40px;
}
CSS Code复制内容到剪贴板
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 40px 40px 40px 0;
}
结果是长方形，其中一边为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: 9px 18px;
border-style: solid;
border-color: #009a61 #009a61 transparent #009a61;
}
HTML5 Canvas
在你的HTML文件中有以下的canvas元素：
XML/HTML Code复制内容到剪贴板
<canvas id="triangle" height="100" width="100">Triangle</canvas>
这里的如何使用JavaScript绘制一个三角形：
JavaScript Code复制内容到剪贴板
var canvas = document.getElementById('triangle');
var context = 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复制内容到剪贴板
#p#副标题#e#
<svg xmlns="" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100"/>
</svg>
然后，只需添加一些样式：
CSS Code复制内容到剪贴板
.svg-triangle{
margin: 0 auto;
width: 100px;
height: 100px;
}
.svg-triangle polygon {
fill:#98d02e;
stroke:#65b81d;
stroke-width:2;