crus4

crus4

SVG Triangle


Table of Contents

SVG Triangle

In our Previous Article we have learnt about SVG Polygon. Where we learn that polygon is any closed figure with three or more than three straight sides. Since the triangle also consists of three sides, so we are gonna use the <polygon> element to create a triangle.

Below in an Example let’s write a code to create a triangle.

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG Triangle</title>
</head>
<body>
<svg height="500" width="500">
  <polygon points="250,60 100,400 400,400" style="fill:powderblue;stroke:red;stroke-width:1"/>
</svg>
</body>
</html>

Create Inverted SVG Triangle

Example

<!DOCTYPE html>
<html>
<head>
  <title>SVG inverted Triangle</title>
</head>
<body>
<svg height="500" width="500">
 <polygon points="2,0 200,0 100,200" style="fill:powderblue;stroke:red;stroke-width:2"/>
</svg>
</body>
</html>


Related Posts

SVG Polygon

Dotted Line SVG

SVG Rectangle

SVG Triangle – crus4