面试官,你想要哪种三角形?

介绍三种不需要引用图片和符号构造三角形的方法

  1. 使用一个div标签来实现(原理是视觉上隐藏其他三个三角形)
    div{
        width: 0;
        height: 0;
        border-top: 50px solid red;
        border-left: 50px solid white;
        border-bottom: 50px solid white;
        border-right: 50px solid white;
    }

2.使用canvas标签来实现绘制三角形

<canvas id="triangle" height="200px" width="300px"></canvas>
    <script>
        var c=document.querySelector('#triangle');
        var cxt=c.getContext('2d');
        cxt.moveTo(10,10);
        cxt.lineTo(150,10);
        cxt.lineTo(10,140);
        cxt.lineTo(10,10);   
        cxt.stroke();
    </script>

3.使用svg绘制多边形(三角形)

//.svg文件
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="100,100 150,250 300,300"
style="fill:pink;
stroke:#ccc;
stroke-width:1"/>

</svg>
全部评论

相关推荐

评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务