CSS中使用border来创建三角形的基本方法讲解

context.lineTo(50, 100);   
  
context.closePath();   
  
context.fillStyle = "rgb(78, 193, 243)";   
context.fill();  

SVG (Scalable Vector Graphics)

这是如何在您的标签，你可以定义一个内联SVG三角形：

XML/HTML Code复制内容到剪贴板

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">  
  <polygon points="0,0 100,0 50,100"/>  
</svg>  

然后，只需添加一些样式：

CSS Code复制内容到剪贴板

.svg-triangle{   
 margin: 0 auto;   
 width: 100px;   
 height: 100px;     
}     
  
.svg-triangle polygon {   
 fill:#98d02e;   
 stroke:#65b81d;   
 stroke-width:2;   
}