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