前端實現三角形的三種方法
阿新 • • 發佈:2018-12-16
直接貼程式碼行不行?我是個不善於表達的姑娘QAQ
第一種 HTML+CSS
<div class="box"></div>
<style>
.box{
width:0;
height:0;
border:10px solid;
border-color:transparent transparent red red ;
}
</style>
第二種 通過canvas
<div id="canvas"></div>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
</script>
第三種 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="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>