前端实现三角形的三种方法

最新推荐文章于 2024-09-20 10:57:24 发布

Savannah008

最新推荐文章于 2024-09-20 10:57:24 发布

阅读量3.2k

点赞数 1

分类专栏：前端开发 CSS HTML5

原文链接：https://blog.csdn.net/qq_31598771/article/details/83180548

版权

前端开发同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

第一种 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>