比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿
- .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未改变部分与上面相同)
- .triangle{
- border-color:#ff0000transparenttransparenttransparent;
- border-width:40px40px40px40px;
- }
效果:
IE6不支持transparent,所以不会透明而会显示难看的黑色,不过也有解决方法:将透明的部分对应的border-style设为dashed即可
- .triangle{
- border-color:#ff0000transparenttransparenttransparent;
- border-style:soliddasheddasheddashed;
- border-width:40px40px40px40px;
- }
正方形按对角线平分为两个三角形的情况
- .triangle{
- border-color:#ff0000#ffff00#0000ff#008000;
- border-style:solid;
- border-width:0040px40px;
- }
- .triangle{
- border-color:#ff0000#ffff00#0000ff#008000;
- border-style:solid;
- border-width:040px40px0;
- }
需要指出的是,此时正方形的大小为40x40
如果将border-width的某一边设为0又会怎么样呢?也算是两种情况
- .triangle{
- border-color:#ff0000#ffff00#0000ff#008000;
- border-style:solid;
- border-width:40px40px040px;
- }
- .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十分明显,这也是三角形的一个很好的应用
- .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元素:
- <canvasid="triangle"height="100"width="100">Triangle</canvas>
- 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三角形:
- <svgxmlns="http://www.w3.org/2000/svg"version="1.1"class="svg-triangle">
- <polygonpoints="0,0100,050,100"/>
- </svg>
然后,只需添加一些样式:
- .svg-triangle{
- margin:0auto;
- width:100px;
- height:100px;
- }
- .svg-trianglepolygon{
- fill:#98d02e;
- stroke:#65b81d;
- stroke-width:2;
- }
以上就是CSS中如何使用border来创建三角形的基本方法讲解。很多人爱着爱着,爱了全世界,可唯独忘了爱自己。更多关于CSS中如何使用border来创建三角形的基本方法讲解请关注haodaima.com其它相关文章!