How to Create a Triangle Using CSS clip-path

CSSWeb DevelopmentFront End Technology

We can create a triangle using CSS clip-path property.

Syntax

The syntax of CSS clip-path property is as follows −

Selector {
   clip-path: /*value*/
}

Example

The following examples illustrate CSS clip-path property.

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            padding: 10%;
            border-radius: 2%;
            width: 10%;
            box-shadow: inset 0 0 80px violet;
            clip-path: polygon(50% 0, 100% 100%, 0% 100%);
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

This gives the following output

Example

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            display: flex;
            margin: 10px 0 20px;
         }
         div > div {
            height: 12px;
            border-top: 40px ridge orange;
            border-right: 20px solid white;
            border-bottom: 60px ridge cornflowerblue;
            border-left: 80px solid white;
         }
      </style>
   </head>
   <body>
      <div>
         <div></div>
      </div>
   </body>
</html>

This gives the following output

raja
Published on 10-Feb-2021 13:06:18
Advertisements