c^ret

A live CSS-triangle generator — set the width, border, direction and colors, copy the CSS.

HTML


        
CSS

        

      

    


    

      

        
        
      

    

  


  

    
c^ret generates a bordered CSS triangle — the classic double-border trick — from a few simple inputs: width, border width, direction, and two colors. Play with the controls above and copy the generated HTML/CSS straight into your project.



The technique layers two elements: an outer one sized to width in the fill color, and a smaller inner one (width - border) in the background color, offset by border pixels. Which sides get the border color (and which stay transparent) depends on the chosen direction.


css
.caret {
  position: relative;
}

.caret:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 50px solid #d9433e;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}



Use it on lists, tooltips, buttons — anywhere you'd reach for a small directional pointer.