Interactive CSS Triangle Generator Specification

Overview

This web-based tool allows frontend developers to visually configure and generate pure CSS code for geometric triangles. By manipulating CSS borders, users can create isosceles, right-angled, and scalene triangles without needing external assets like SVGs or images.

UI/UX Layout

• Container: A clean, high-contrast dashboard with a split-pane layout.
• Left Pane (Controls): Contains interactive sliders, inputs, and toggle switches for styling.
• Center Pane (Live Preview): A bounded canvas area that shows the triangle in real-time as settings are adjusted.
• Bottom Pane (Code Output): A syntax-highlighted code block that updates instantly, featuring a 'Copy to Clipboard' button.

Core Interactive Features

1. Directional Preset: A 360-degree interactive dial or 8-point selector to set the triangle orientation (Up, Down, Left, Right, and diagonals).
2. Dimension Controls:
   • Base Width Slider: Adjusts the width of the triangle base.
   • Height Slider: Adjusts the height of the triangle.
3. Color Picker: A robust color input supporting Hex, RGB, and HSL formats with an opacity slider.
4. Shape Adjustments:
   • Isosceles vs. Right-Angled Toggle: Switches the rendering logic between different border-width configurations.
   • Corner Rounding: An experimental slider to apply border-radius to the corners of the shape.
5. Advanced Output Modes:
   • Standard CSS: The default output.
   • SASS/LESS: Formatted mixin output for reusable components.
   • Tailwind Utility: Suggested utility classes for the generated look.

Technical Implementation Details

• Rendering: Use an invisible div element with zero width/height and dynamic border properties mapped directly from the state.
• Animation: Use CSS transitions on the border properties to provide smooth visual feedback when sliders are moved.
• Copy-to-Clipboard: Implementation of the Clipboard API with a toast notification confirmation upon success.
• Theme: Dark mode by default to reduce eye strain for developers. Use a neutral gray palette (#1a1a1a) with a primary blue accent (#007bff) for active buttons and sliders.

Design System

• Typography: Monospaced fonts (e.g., Fira Code or JetBrains Mono) for all CSS code output to ensure readability.
• Visual Hierarchy: Group controls logically (Size, Style, Output) using card-based modules with subtle shadows.
• Responsiveness: The app will stack the panes vertically on mobile devices, ensuring the preview area remains visible even on small screens.