My pattern library

2.4 #Cartesian geometry.triangles Triangle

Creates a triangle according to the following inputs:

--side1-em and --side2-em: the lengths of two of the triangle's sides, let them be side_1 and side_2, the former coming "before" the latter in a clockwise sense, and the vertex between them being the orgin (that can be positioned via dedicated rulesets);
--alpha-deg: the angle between side_1 and side_2;
--offset-deg: the clockwise offset of side_1 with respect to the positive vertical direction;
--color (default: black): fill color of the triangle,
--opacity: opacity of the filling of the triangle,

Implentation: An ::after pseudo-element with the shape of a square with side equal to --side1-em is created, then scaled along the y axis and skewed (according to the ratio between --side1-em and --side2-em, and to --alpha-deg and its sine), and rotated (according to --offset-deg).

Note: The dashed square in the example below is the one from which the triangle is obtained, and it (not the triangle) is what affects the document flow. Clearly, positioning the triangle allows one to remove the spacing that the dashed square would cause. See also the .center-origin--after class.

Example

Markup

<style>
#untransformed-square {
  position: relative;
  left: 0;
  right: 0;
  width: 20em;
  height: 20em;
  display: block;
  content: '';
  border: 1px dashed black;
}
#untransformed-square + * {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<div id="untransformed-square"></div>
<div class="trigonometry triangle" style="--side1-em: 20; --side2-em: 8; --alpha-deg: 30; --offset-deg: 100; --color: red; --opacity: 100%;"></div>

Source: css/modules/cartesian/triangle.css, line 1