CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

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

quietin

比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿

CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     height: 0;   
  3.     width: 0;   
  4.     overflow: hidden;   
  5.     font-size: 0;   
  6.     line-height: 0;   
  7.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  8.     border-style: solid;   
  9.     border-width: 40px 40px 40px 40px;   
  10. }  

效果如下：
2016331113511345.png (88×85)

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

CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     border-color: #ff0000 transparent transparent transparent;   
  3.     border-width: 40px 40px 40px 40px;   
  4. }  

效果：
2016331113536891.png (91×83)

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

CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     border-color: #ff0000 transparent transparent transparent;   
  3.     border-style: solid dashed dashed dashed;   
  4.     border-width: 40px 40px 40px 40px;   
  5. }  

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

CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 0 0 40px 40px;   
  5. }  
2016331113556112.png (45×45)
CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 0 40px 40px 0;   
  5. }  

2016331113615678.png (47×42)

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

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

CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 40px 40px 0 40px;   
  5. }  

2016331113633110.png (88×46)

CSS Code复制内容到剪贴板
  1. .triangle {   
  2.     border-color: #ff0000 #ffff00 #0000ff #008000;   
  3.     border-style: solid;   
  4.     border-width: 40px 40px 40px 0;   
  5. }  

2016331113651034.png (49×87)

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

segmentfault的"采纳"的显示其实也是用三角形实现的
2016331113707748.png (42×50)

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

CSS Code复制内容到剪贴板
  1. .accepted-flag:after {   
  2.     position: absolute;   
  3.     left: 0;   
  4.     top: 25px;   
  5.     content: '';   
  6.     border-width: 9px 18px;   
  7.     border-style: solid;   
  8.     border-color: #009a61 #009a61 transparent #009a61;   
  9. }  

HTML5 Canvas

在你的HTML文件中有以下的canvas元素：

XML/HTML Code复制内容到剪贴板
  1. <canvas id="triangle" height="100" width="100">Triangle</canvas>  
这里的如何使用JavaScript绘制一个三角形：
JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById('triangle');   
  2. var context = canvas.getContext('2d');   
  3.   
  4. context.beginPath();   
  5. context.moveTo(0, 0);   
  6. context.lineTo(100, 0);   
  7. context.lineTo(50, 100);   
  8.   
  9. context.closePath();   
  10.   
  11. context.fillStyle = "rgb(78, 193, 243)";   
  12. context.fill();  

SVG (Scalable Vector Graphics)

这是如何在您的标签，你可以定义一个内联SVG三角形：

XML/HTML Code复制内容到剪贴板
  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">  
  2.   <polygon points="0,0 100,0 50,100"/>  
  3. </svg>  

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

CSS Code复制内容到剪贴板
  1. .svg-triangle{   
  2.  margin: 0 auto;   
  3.  width: 100px;   
  4.  height: 100px;     
  5. }     
  6.   
  7. .svg-triangle polygon {   
  8.  fill:#98d02e;   
  9.  stroke:#65b81d;   
  10.  stroke-width:2;   
  11. }