1. 程式人生 > >前端實現三角形的三種方法

前端實現三角形的三種方法

直接貼程式碼行不行?我是個不善於表達的姑娘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>