面试官,你想要哪种三角形?
介绍三种不需要引用图片和符号构造三角形的方法
- 使用一个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>


查看3道真题和解析