How to Create a Triangle Using CSS clip-path?

By using the CSS clip-path, we have to create a triangle.
Submitted by Apurva Mathur, on June 25, 2022

What is the clip-path property is CSS?

In simple terms, this property means cutting some specific shape from the given area. Just like we used to do in our childhood, cutting the shapes like circles, triangles, etc.

The clip-path property does the same, it display the shape from the provided value. The clip-path property has 4 geometric values that you can set it with.

  • Inset: The value of the inset clip-path property is somewhat similar to the margin padding property (Top, Right, Bottom, Left)
  • Circle: This value requires 2 parameters. The first one is the radius of the circle and the second one is the coordinate of the center to the top left corner.
  • Polygon: This value can take any number of parameters. Each parameter consists of the x coordinate and the y coordinate. The units applied as the parameter can be anything as we apply in the margin, and padding properties.
  • Ellipse: It is similar to the circle value, but here two values of the radius will be provided instead of one.

Triangle using CSS clip-path

<!DOCTYPE html>

<html>
   <head>
      <style>
         div {
         padding:10%;
         clip-path: polygon(50% 0, 100% 100%, 0% 100%);
         background-color: red;
         color: white;
         margin-right: 50%;
         text-align: center;
         font-size: 45px;
         }
      </style>
   </head>
   <body style="background-color:lightblue">
      <div>Include helps welcomes you</div>
   </body>
   </html

Output:

Example: Triangle Using CSS clip-path

Explanation:

Step 1: Open a div tag and write any content inside the tag. Here, div tag is used you can also use img tag if you want to style any image in a particular geometric shape.

Step 2: Give some padding to the div as it will help our element's content to fit inside the shape.

Step 3: clip-path: polygon(50% 0, 100% 100%, 0% 100%); This is the fixed value we use to get the perfect triangle, try to change the coordinates and you'll get different types of triangles every time.

Step 4: Rest you can apply any basic properties to make it look attractive.

Step 5: Run the code on the browser.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.