CSS中使用border来创建三角形的基本方法讲解

    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复制内容到剪贴板

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!