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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

Next

Related Posts

SVG Polygon

Dotted Line SVG

SVG Rectangle

SVG Triangle – crus4