On gists

triangles in CSS (3 ways)

CSS CSS trick

index.css Raw #

/* https://htmixl.medium.com/how-to-create-triangles-in-css-three-easy-ways-49bd6dce7810 */

/* 1. borders */
.triangle{
 width: 0;
 height: 0;
 border-left: 150px solid red;
 border-top: 150px solid transparent;
}

/* 2. clip-path */
.triangle{
  width: 150px;
  height: 150px;
  background-color: blue;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* 3. gradient */
.triangle{
  width: 150px;
  height: 150px;
  background-image: 
    linear-gradient(to top right, green 50%, transparent 0);
  background-repeat: no-repeat;
}