shapes.pcss

/*---
 section: Base
 title: Shapes
 ---

 ```html_example
 <span class="o-triangle--right"></span>
 ```
 */

/* Triangle */
@svg triangle-right {
  @polygon {
    fill: var(--color, black);
    height: 100%;
    points: .375, .375 45.63, 38.087 .375, 75.8;
    width: 100%;
  }
}

.o-triangle--right {
  background-image: svg(triangle-right param(--color black));
  display: inline-block;
  height: 150px;
  width: 150px;
}

@svg triangle-bottom {
  @polygon {
    fill: var(--color, black);
    height: 100%;
    points: 0, 0 30, 0 15, 30;
    width: 100%;
  }
}

@svg arrow-right {
  @polyline {
    fill: none;
    stroke: var(--color, black);
    stroke-width: 16;
    stroke-linejoin: round;
    stroke-linecap: round;
    points: 184, 16 72, 128 184, 240;
  }
}

@svg arrow-left {
  @polyline {
    fill: none;
    stroke: var(--color, black);
    stroke-width: 16;
    stroke-linejoin: round;
    stroke-linecap: round;
    points: 184, 16 72, 128 184, 240
  }
}

@svg octagon {
  @polygon {
    fill: var(--color, black);
    height: 100%;
    points: 50, 5 100, 5 125, 30 125, 80 100, 105 50, 105 25, 80 25, 30;
    width: 100%;
  }
}

@svg hexagon {
  @polygon {
    fill: var(--color, black);
    height: 100%;
    points: 60, 20 100, 40 100, 80 60, 100 20, 80 20, 40;
    width: 100%;
  }
}

@svg star {
  @polygon {
    fill: var(--color, black);
    height: 100%;
    points: 35, 120.5 37.9, 129.1 46.9, 129.1 39.7, 134.5 42.3, 143.1 35, 139 27.7, 143.1 30.3, 134.5 23.1, 129.1 32.1, 129.1;
    width: 100%;
  }
}

/*
.arrow {
  background-image: svg(arrow param(--color black));
  width: 100px;
  height: 100px;
}

*/