Triangles#

Tinka's brand make uses of oblique lines and sharp angles to create a dynamic feeling.

Since it is so important for our brand, we have developed components to easily create these shapes without worrying about the design details.

The SVG path element is set to fill="currentColor", therefore the fill color follows the current text color in its context.

Usage of text-green-800, text-green-100 is recommended.

When customizing className, remember to specify how wide the triangle should be. In most of the cases, w-full or (width: 100%) is a good number to start.

In math, slope is a number showing how steep a line is. If a line has a slope of 0.1, then it means that when x incease for 100, y increases for 100 * 0.1 = 10.

In the context of this Triangle component. It means the height is width * slope.

The following values are recommended, from tallest to shortest:

• 0.28 – very bold, very Tinka-ish. Recommended for marketing pages.
• 0.15 – a good value for triangles between page sections.
• 0.075 – a subtle oblique line. Good for screens with intensive UI.
• 0.05 – super subtle

import { createTriangle } from "@tinka/react";
 
const triangle = createTriangle({ r: 0.75, slope: 0.28, flatSide: "top" });
const { style: insetStyle } = triangle.inset("bottom-left");
 
export const YourComponent = () => (
  <div>
    {triangle.component}
    <div className="grid grid-cols-2">
      <div className="p-4 border" style={insetStyle}>
        Following Content
      </div>
      <div className="p-4 border">Following Content (right)</div>
    </div>
  </div>
);

createTriangle can be used both inside and outside of the render function.

Using it outside will save some computation power; the triangle and insets will not be re-calculate on every render.

Since the calculation for the margins & paddings around the triangular shapes can be complicated. Here we provide 2 playgrounds for users who want to just have markups.

In these examples, we are still using some Tailwind utility classes for providing an layout. It is up to you to swap them with inline styling or your own stylesheet.

This usually happens when the SVG element is scaled with GPU transform (for example, when using scale in CSS Transform in some browsers). There is no universal fix and the solution is different for every case.

Here're some possible solutions:

• When using CSS transform, add an additional translateY(0.1px) command to the container or the triangle SVG element, this nudge might round up the half-empty pixels.