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;
}
