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

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

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

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

CSS Code拷贝內容到剪贴板
  1. .triangle {   
  2.     height: 0;   
  3.     width: 0;   
  4.     overflowhidden;   
  5.     font-size: 0;   
  6.     line-height: 0;   
  7.     border-color#ff0000 #ffff00 #0000ff #008000;   
  8.     border-stylesolid;   
  9.     border-width40px 40px 40px 40px;   
  10. }  

实际效果以下:

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

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

实际效果:

IE6不适用transparent,因此不容易全透明而会显示信息不好看的黑色,但是也是有处理方式:将全透明的一部分对应的border-style设为dashed便可

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

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

CSS Code拷贝內容到剪贴板
  1. .triangle {   
  2.     border-color#ff0000 #ffff00 #0000ff #008000;   
  3.     border-stylesolid;   
  4.     border-width: 0 0 40px 40px;   
  5. }  
CSS Code拷贝內容到剪贴板
  1. .triangle {   
  2.     border-color#ff0000 #ffff00 #0000ff #008000;   
  3.     border-stylesolid;   
  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-stylesolid;   
  4.     border-width40px 40px 0 40px;   
  5. }  

CSS Code拷贝內容到剪贴板
  1. .triangle {   
  2.     border-color#ff0000 #ffff00 #0000ff #008000;   
  3.     border-stylesolid;   
  4.     border-width40px 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.     positionabsolute;   
  3.     left: 0;   
  4.     top25px;   
  5.     content'';   
  6.     border-width9px 18px;   
  7.     border-stylesolid;   
  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.  width100px;   
  4.  height100px;     
  5. }     
  6.   
  7. .svg-triangle polygon {   
  8.  fill:#98d02e;   
  9.  stroke:#65b81d;   
  10.  stroke-width:2;   
  11. }