Smart Tools Utility

CSS Triangle Generator

Pure CSS Triangles • Border Trick • No Images Needed

Direction
Base Width100px
Point Length100px
Live Preview
CSS Code

                        

                             This uses the classic CSS "border trick" — a zero-size element with only its borders showing forms the triangle. No image file is needed.
                        

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Triangle Generator

            
This tool builds a triangle using a classic CSS technique rather than an image or clip-path: give an element zero width and zero height, then set its borders. Where two adjacent borders meet, they form a diagonal edge, so by making one border a solid color and the others transparent (or zero-width), the shape that remains visible is a clean triangle. This works in every browser, scales perfectly at any size since it's not a raster image, and needs no extra HTTP request. Pick a direction — up, down, left, right, or one of the four corners for ribbon/badge-style triangles — adjust the size and color, and copy the resulting CSS. All processing happens locally in your browser.

        

        
    


    
    
    

        

            

                
                All CSS & Web Design →