Web development Tips and Tricks: CSS-only triangles

Tuesday, February 17, 2015

You can make a triangle with just CSS (just like the tiny triangle on Vimeo sidebar).

.triangle {

    width: 0;

    height: 0;

    border-top: 100px solid #0099ff;

    border-left: 100px dashed transparent;

    border-right: 100px dashed transparent;

    border-bottom: 0;

   display: block;

   overflow: hidden;