How to create a Triangle using CSS clip-path ?
Last Updated :
02 Aug, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...