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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS使用border来创建三角形的基本思路和实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2699字，纯文字阅读大概需要4分钟。

内容图文

将边框分别设置为红/黄/蓝/绿

.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未改变部分与上面相同)

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

效果如下：

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;   
}  

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

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

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

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

.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十分明显，这也是三角形的一个很好的应用

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

Triangle 

这里的如何使用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来创建三角形的基本思路和实例全部内容，希望文章能够帮你解决CSS使用border来创建三角形的基本思路和实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端