<span data-type="border" class="triangle border"></span>
<span data-type="gradient" class="triangle gradient"></span>
<span data-type="clip-path" class="triangle clip-path"></span>
* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  grid-gap: 2rem;
  min-height: 100vh;
  padding: 2rem;

  @media (min-width: 40em) {
    grid-auto-flow: column;
  }
}

.triangle {
  display: grid;
  place-content: center;
  width: 30vw;
  height: 30vw;
  border: 1px dashed #777;

  &::after {
    content: "";
  }

  &::before {
    content: attr(data-type);
    position: absolute;
    padding: 0.15em 0.25em;
    background-color: #777;
    color: #fff;
  }
}

.border::after {
  border-style: solid;
  border-color: transparent;
  border-width: 3vw 0 3vw 5vw;
  border-left-color: blue;
}

$t: rgba(white, 0);

.gradient::after {
  width: 5vw;
  height: 6vw;
  background-image: linear-gradient(32deg, blue 50%, $t 50%),
    linear-gradient(148deg, blue 50%, $t 50%);
  background-position: top left, bottom left;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

// Make clip-paths easy with
// @link https://bennettfeely.com/clippy/
.clip-path::after {
  width: 5vw;
  height: 6vw;
  background-color: blue;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.