css+html如何绘制三角形

html+css如何绘制三角形

html代码：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS Triangle Demo</title> 
    <link rel="stylesheet" href="triangle.css"> 
</head> 

<body> 
    <h3>Down Triangle</h3> 
    <div class="down-triangle"> 
    </div> 
 
    <h3>Up Triangle</h3> 
    <div class="up-triangle"> 
    </div> 
 
    <h3>Left Triangle</h3> 
    <div class="left-triangle"> 
    </div>     
 
    <h3>Right Triangle</h3> 
    <div class="right-triangle"> 
    </div>         
 </body> 
</html> 


css代码：
.down-triangle { 
    width: 0; 
    height: 0; 
    border-width: 10px 10px 0 10px; 
    border-style: solid; 
    border-color: #dc291e transparent; 
} 

.up-triangle { 
width: 0; 
height: 0; 
border-width: 0px 10px 10px 10px; 
border-style: solid; 
border-color: #dc291e transparent; 
} 

.left-triangle { 
width: 0; 
height: 0; 
border-width: 10px 10px 10px 0px; 
border-style: solid; 
border-color: transparent #dc291e; 
} 

.right-triangle { 
width: 0; 
height: 0; 
border-width: 10px 0px 10px 10px; 
border-style: solid; 
border-color: transparent #dc291e; 
}

HTML5 Canvas

在你的HTML文件中有以下的canvas元素：

<canvas id="triangle" height="100" width="100">Triangle</canvas>
这里的如何使用JavaScript绘制一个三角形：

var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);

context.closePath();

context.fillStyle = "rgb(78, 193, 243)";
context.fill();

SVG (Scalable Vector Graphics)

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
  <polygon points="0,0 100,0 50,100"/>
</svg>
然后，只需添加一些样式：

.svg-triangle{
    margin: 0 auto;
    width: 100px;
    height: 100px;      
}       

.svg-triangle polygon {
    fill:#98d02e;
    stroke:#65b81d;
    stroke-width:2;
}

来源：https://www.cnblogs.com/xiuxiu123/p/5391194.html

标签

border

context

triangle