How to create a Triangle using CSS clip-path ? Last Updated : 02 Aug, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how we can create a triangle using CSS clip-path property. The CSS clip-path property is used to clip the particular section of the image such that the part of the image inside the section is shown and part of the image outside the section is not shown. Syntax: clip-path: <clip-source> | <basic-shape> | none; Approach: First, we will create a div element containing .container class and then apply CSS styles on it. We will set the position of a container using position, top, left, and transform property. After that, we will use the width, height, and background-color property to set the color and size of the container and use the e clip-path property to create the triangle. Example: This example describes how to create a Triangle using clip-path property. HTML <!DOCTYPE html> <html> <head> <title> How to Create a Triangle using CSS clip-path? </title> <style> h1 { color: green; } h1, h3 { text-align: center; } .container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background-color: green; clip-path: polygon(0% 0%, 100% 0%, 0% 100%); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to Create a Triangle using CSS clip-path? </h3> <div class="container"></div> </body> </html> Output: Example 2: This example describes how to create a Triangle using clip-path property. In this example, we will use the similar approach as above but will create a different shape triangle. HTML <!DOCTYPE html> <html> <head> <title> How to Create a Triangle using CSS clip-path ? </title> <style> body { text-align: center; } h1 { color: green; } #box { width: 300px; height: 300px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background-color: blue; margin: 0 auto; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to Create a Triangle using CSS clip-path ? </h3> <div id="box"></div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a Triangle using CSS clip-path ? A ashokjaiswal Follow Improve Article Tags : Web Technologies CSS CSS-Properties HTML-Questions CSS-Questions +1 More Similar Reads How to create a canvas triangle using Fabric.js ? In this article, we are going to create a canvas triangle using FabricJS. The canvas triangle means the triangle is movable and can be stretched according to requirement. Further, the triangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To mak 2 min read How to Create Triangle with CSS? Creating a triangle in CSS involves a clever use of borders to form various shapes without actual images. By setting the width and height of an HTML element to zero and applying specific borders, you can create directional triangles.To create a triangle:Add a single <div> element in your HTML 2 min read How to create shape using CSS clipping ? You can easily create shapes using the clip-path property in CSS. Actually clip-path property lets you clip an element to a basic shape. The basic shape like circle, ellipse, the polygon can be achieved using the <basic-shape> property value of clip-path which will be discussed further in this 3 min read How to create a Circular/Rounded images using CSS ? In this article, we will create a rounded image with CSS. It can be done by using the CSS border-radius property. This property is mainly used to make round shapes. It contains a numeric value in the form of pixels. Example 1: HTML <!DOCTYPE html> <html> <head> <style> img { 1 min read How to create a Chevron using Tailwind CSS ? A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward 3 min read Like