您的位置:首页 > Web前端 > > 正文

css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

更多 时间:2021-11-08 16:35:42 类别:Web前端 浏览量:2522

css样式表中border在哪

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

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

  • 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. }  
  • 效果如下:
    css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

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

  • CSS Code复制内容到剪贴板
    1. .triangle {   
    2.     border-color#ff0000 transparent transparent transparent;   
    3.     border-width40px 40px 40px 40px;   
    4. }  
  • 效果:
    css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

    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. }  
  • 正方形按对角线平分为两个三角形的情况

  • CSS Code复制内容到剪贴板
    1. .triangle {   
    2.     border-color#ff0000 #ffff00 #0000ff #008000;   
    3.     border-stylesolid;   
    4.     border-width: 0 0 40px 40px;   
    5. }  
  • css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)
  • CSS Code复制内容到剪贴板
    1. .triangle {   
    2.     border-color#ff0000 #ffff00 #0000ff #008000;   
    3.     border-stylesolid;   
    4.     border-width: 0 40px 40px 0;   
    5. }  
  • css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

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

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

  • CSS Code复制内容到剪贴板
    1. .triangle {   
    2.     border-color#ff0000 #ffff00 #0000ff #008000;   
    3.     border-stylesolid;   
    4.     border-width40px 40px 0 40px;   
    5. }  
  • css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

  • CSS Code复制内容到剪贴板
    1. .triangle {   
    2.     border-color#ff0000 #ffff00 #0000ff #008000;   
    3.     border-stylesolid;   
    4.     border-width40px 40px 40px 0;   
    5. }  
  • css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

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

    segmentfault的"采纳"的显示其实也是用三角形实现的
    css样式表中border在哪(CSS中使用border来创建三角形的基本方法讲解)

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

  • 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绘制一个三角形:
  • 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.  width100px;   
    4.  height100px;     
    5. }     
    6.   
    7. .svg-triangle polygon {   
    8.  fill:#98d02e;   
    9.  stroke:#65b81d;   
    10.  stroke-width:2;   
    11. }  
  • 标签:三角形 css