美文网首页
css 三角形三种方法

css 三角形三种方法

作者: 万水千山林 | 来源:发表于2021-08-25 15:39 被阅读0次
    image.png

    宽高为0效果,想要三角形只要将border颜色设置为transparent(透明即可)

      .triangle {
        width:0px;
        height: 0px;
        border-left: 100px solid red;
        border-top: 100px solid rgb(43, 255, 0);
        border-bottom: 100px solid rgb(0, 4, 255);
        border-right: 100px solid pink;
      }
    
    <div class='triangle'></div>
    
    image.png
    .triangle {
        width:0px;
        height: 0px;
        border-left: 100px solid red;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-right: 100px solid transparent;
      }
    

    2 canvas(坐标画点,然后闭合路线)


    image.png
    <canvas id="canvas"></canvas>
    <script>
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          ctx.beginPath();      // 起始一条路径,或重置当前路径
          ctx.moveTo(75,50);    // 把路径移动到画布中的指定点,不创建线条
          ctx.lineTo(100,75);   // 添加一个新点,然后在画布中创建从该点到最后指定点的线条
          ctx.lineTo(100,25)    // 添加一个新点,然后在画布中创建从该点到最后指定点的线条
          ctx.fillStyle='green' // 设置或返回用于填充绘画的颜色、渐变或模式
          ctx.fill() // 闭合路线
      </script>
    

    3 svg
    <polygon> 标签用来创建含有不少于三个边的图形。

    <svg width="100%" height="100%" version='1.1' xmlns="http://www.w3.org/2000/svg">
     <polygon points='220,100 300,210 170,250' style="fill:#cccccc;stroke: #000000;stroke-width: 1"></polygon>
    </svg>
    

    相关文章

      网友评论

          本文标题:css 三角形三种方法

          本文链接:https://www.haomeiwen.com/subject/mundiltx.html