手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS中使用border来创建三角形的基本方法讲解
CSS中使用border来创建三角形的基本方法讲解
摘要:比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿CSSCode复制内容到剪贴板.tria...

比较简单实用的还是使用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; }

效果如下:

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

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

CSS Code复制内容到剪贴板 .triangle{ border-color:#ff0000transparenttransparenttransparent; border-width:40px40px40px40px; }

效果:

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

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中使用border来创建三角形的基本方法讲解3

CSS Code复制内容到剪贴板 .triangle{ border-color:#ff0000#ffff00#0000ff#008000; border-style:solid; border-width:040px40px0; }

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

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

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

CSS Code复制内容到剪贴板 .triangle{ border-color:#ff0000#ffff00#0000ff#008000; border-style:solid; border-width:40px40px040px; }

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

CSS Code复制内容到剪贴板 .triangle{ border-color:#ff0000#ffff00#0000ff#008000; border-style:solid; border-width:40px40px40px0; }

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

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

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

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

上部分是包含'采纳'两个字的块状元素,设置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; }

【CSS中使用border来创建三角形的基本方法讲解】相关文章:

用CSS设置表格边框的语法详解

网页中用于构造图表的一些基本CSS代码

CSS条状图表形式的实现方法

css中用javascript判断浏览器版本

使用before和:after伪类制作css3圆形按钮

chrome居中但ie不居中的解决方法

使用css的background:url设置背景图方法

CSS之DIV长度相等的几个办法

li行间距大(IE中多了5个像素)的解决方法

用纯CSS代码创建日历图标

精品推荐
分类导航