Making a zero-width and zero-height element look like a triangle with border
CSS borders meet diagonally at the four corners of an element. By setting the element's width and height to 0 and border-style to solid, the top, bottom, left, and right borders converge at a central point.
By coloring only one of these borders and making the adjacent ones transparent, only the colored portion appears as a triangle.
This generator outputs width: 0, height: 0, and border-style: solid to .css-triangle, and assembles values for all four borders of border-width and border-color based on the chosen direction.
It does not generate images or SVGs, but rather relies on the browser to draw the HTML element's borders.
Borders set to transparent also exist as an area determining the shape. If you change the width or height while only looking at the colored border, the proportions will become unintended, so the four border-width sides are handled as a set.
Slight bleeding at the boundaries may occur depending on the browser zoom level or rendering engine, and it is not a method that guarantees pixel-perfect parity with vector graphics.
Top, bottom, left, and right width and height with border-width
When you select "Top", the border-width is 0, half the width, height, and half the width, in that order. The border-color sets top, right, and left to transparent, using the specified color only for the bottom border.
The colored bottom border appears pointing upwards from the center, and the left/right transparent borders form the base width. Conversely, "Bottom" assigns the height and color to the top border, and uses half the width for the left and right.
For "Left", half the height is assigned to the top and bottom borders, and the width to the right border. Only the right border is colored, and the left border is 0.
"Right" assigns the width and color to the left border, and uses half the height for the top and bottom. Therefore, the vertical input width corresponds to the entire base, and the horizontal input height corresponds to the entire base.
The width and height are each 10 to 300px, with initial values of 100px for both. If the width is an odd number, half becomes a decimal like 50.5px, which is output exactly as-is to the CSS.
Even if the width and height are identical, the shape produced by the border method cannot necessarily be called a mathematically perfect equilateral triangle.
Adjust the aspect ratio while viewing the preview to suit your needs.
Four diagonal directions and 6-digit HEX colors
Top-left, top-right, bottom-left, and bottom-right are right-angled triangles that assign the input width and height to two adjacent borders.
For top-left, the border-width is height, width, 0, 0, coloring the top border and making the right transparent. Top-right uses 0, width, height, 0, coloring the right border and making the bottom transparent.
Bottom-left uses height, 0, 0, width, coloring the left border and making the top transparent. Bottom-right uses 0, 0, height, width, coloring the bottom border and making the left transparent.
The direction selector is organized in a 3×3 grid representing 8 directional orientations: top, bottom, left, right, and the four corners (top-left, top-right, bottom-left, bottom-right).
The center position serves purely as a non-clickable placeholder rather than an actionable direction button. For cardinal directions (top, bottom, left, right), the width and height define the base and altitude of an isosceles triangle.
For diagonal corner triangles, the width and height specify the dimensions of the two perpendicular legs forming the right angle, providing distinct geometric proportions.
Triangle colors require an exact 6-digit HEX code such as #3b82f6. You can select colors using preset swatches, the native browser color picker, or direct text input.
The tool enforces strict validation: if the color input does not match a valid #RRGGBB hex format, the preview shape and generated code automatically substitute transparent borders rather than emitting broken CSS, while retaining your uncommitted text draft so your typing is never erased.
Furthermore, while the color remains invalid, all three copy buttons are disabled to prevent copying invalid or invisible styling into your codebase.
Output of standard CSS, HTML, and Tailwind arbitrary values
The Standard CSS field outputs the .css-triangle class and five declarations. Following width, height, and border-style, the border-width and border-color calculated from the selected direction are included.
The HTML field only contains <div class="css-triangle"></div>, so you use this HTML in combination with the standard CSS. If the class name conflicts with existing CSS, change both the HTML and CSS to the same alternative name.
The Tailwind CSS field aligns w-0, h-0, border-solid, and arbitrary value classes representing px values and colors in square brackets onto a single div.
For instance, an upward-pointing triangle includes the width and transparent color of the left/right borders, and the height and specified color of the bottom border.
You must verify the extraction method for Tailwind arbitrary value syntax and color classes based on your current version and build settings.
It does not guarantee output that can be used directly without configuration in all environments.
The standard CSS and Tailwind outputs intend to create the same shape, but the appearance may change due to your project's existing styles or class conflicts.
After copying, check it on the actual page and add display, position, margin, etc., if necessary.
Preview backgrounds and copy results
The preview applies the calculated borderWidth and borderColor as inline styles to a div within the page. Since the shape updates when settings change, you can confirm the 8 directions, aspect ratios, and colors before moving the code.
The preview element features a page-side drop-shadow class for visibility, but this shadow is not included in the generated CSS, HTML, or Tailwind code.
There are three backgrounds: checkerboard, white, and black. "Transparent" on the screen is merely a display name for identifying transparent areas using the checkerboard pattern, not a feature to export transparent background images.
Background settings are also excluded from the copied code.
Individual copy buttons are provided for the CSS rule, HTML element, and Tailwind utility snippet. Whenever an invalid color string is entered, the preview and code substitute transparent borders while keeping your draft intact, and all three copy buttons are disabled until a valid 6-digit HEX code is supplied.
When valid code is copied, the application awaits confirmation from the Clipboard API, displaying a checkmark icon and visual success state for approximately 2 seconds upon success.
If clipboard permissions or browser restrictions prevent automatic copying, an on-screen prompt guides you to highlight and copy the code manually.
Any subsequent edits to dimensions, direction, or color immediately reset the copy status.
Unsupported scope such as positioning, pseudo-elements, and shadows
The output HTML is just an independent div. It does not generate the main speech bubble body, parent containers, position: relative, position: absolute for the triangle, coordinates like top or left, or content for ::before or ::after.
When using it as a tooltip or popover, add CSS tailored to the placement destination, such as moving the copied border values to the target pseudo-element.
It also does not support SCSS, LESS, shadows, animation, SVG, or PNG outputs. There is no performance or quality guarantee that drawing exclusively with CSS will always be lighter than images, load faster, or be perfectly crisp on high-density screens.
Choose a method for expressing shapes and colors that includes maintainability and target browser considerations.
Although code generation and preview calculations are performed locally in JavaScript, this does not mean there is zero network activity, as initial loading of the page and assets occurs.
There is no absolute guarantee of a completely offline experience, absolute security, no third-party collection, or determining legal terms of use for the generated code.
Perform final verification according to the requirements of the implementing site and target browsers.