CSS中应用border来建立3角形的基础方式解读

日期：2020-12-13 类型：科技新闻 

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

较为简易好用的還是应用border来建立3角形，今日关键科学研究这个的完成
将边框各自设定为红/黄/蓝/绿

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

实际效果以下：

4个3角形生成1个正方形，尺寸为80x80，假如大家只想保存在其中某个3角形的话，将其它的设定为全透明便可，例如(下列css未更改一部分与上面同样)

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

实际效果：

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

正方形按对角线均分为两个3角形的状况

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

必须指出的是，此时正方形的尺寸为40x40

假如将border-width的某1边设为0又会如何呢？也算是两种状况

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

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

結果是长方形，在其中1边为801边为40。宽度被设为0的边框对应方位的边框会产生较大的3角形，且长度加倍

segmentfault的"听取意见"的显示信息实际上也是用3角形完成的

上一部分是包括'听取意见'两个字的块状元素，设定position: relative。下一部分用伪类after设定1个position: absolute的块状元素，将二者接在1起。根据border-width设定发展方形而并不是正方形，再将正下方的3角形去掉便可，看下面的css10明晰显，这也是3角形的1个很好的运用

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绘图1个3角形：
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)

这是怎样在您的标识，你能够界定1个内联SVG3角形：

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>  

随后，只需加上1些款式：

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. }  
上一篇：Vue+CSS3完成转盘抽奖的示例编码 返回下一篇：应用纯css断开多写作本