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.
<!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
<!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