点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

CSS使用border来创建三角形的基本思路和实例

来源：懂视网责编：小采时间：2020-11-27 16:41:33

CSS使用border来创建三角形的基本思路和实例

CSS使用border来创建三角形的基本思路和实例:比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #ff0000 #ff

推荐度：

点击下载本文 文档为doc格式

导读CSS使用border来创建三角形的基本思路和实例:比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; line-height: 0; border-color: #ff0000 #ff

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

效果如下：

CSS 使用border来创建三角形的基本思路和实例

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

.triangle { 
 border-color: #ff0000 transparent transparent transparent; 
 border-width: 40px 40px 40px 40px; 
}

效果如下：

CSS 使用border来创建三角形

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

.triangle { 
 border-color: #ff0000 transparent transparent transparent; 
 border-style: solid dashed dashed dashed; 
 border-width: 40px 40px 40px 40px; 
}

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

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 0 0 40px 40px; 
}

CSS 使用border来创建三角形

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 0 40px 40px 0; 
}

CSS 使用border来创建三角形

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

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

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 40px 40px 0 40px; 
}

CSS 使用border来创建三角形

.triangle { 
 border-color: #ff0000 #ffff00 #0000ff #008000; 
 border-style: solid; 
 border-width: 40px 40px 40px 0; 
}

CSS 使用border来创建三角形

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

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

CSS 使用border来创建三角形

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

.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元素：

这里的如何使用JavaScript绘制一个三角形：

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三角形：

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

.svg-triangle{ 
 margin: 0 auto; 
 width: 100px; 
 height: 100px; 
} 
 
.svg-triangle polygon { 
 fill:#98d02e; 
 stroke:#65b81d; 
 stroke-width:2; 
}

CSS使用border来创建三角形的基本思路和实例

推荐度：

点击下载本文 文档为doc格式

标签：方法三角形三角形的

热门焦点

CSS使用border来创建三角形的基本思路和实例

CSS使用border来创建三角形的基本思路和实例

HTML5 Canvas

SVG (Scalable Vector Graphics)

CSS使用border来创建三角形的基本思路和实例

最新推荐

猜你喜欢

热门推荐