Crypto-Jaguars/Revo-Marketplace

Create Hexagonal Clip-Path System

Open

#126 opened on Sep 26, 2025

View on GitHub
 (4 comments) (0 reactions) (1 assignee)TypeScript (71 forks)auto 404
Frontendeasygood first issueonlydust-wave

Repository metrics

Stars
 (5 stars)
PR merge metrics
 (PR metrics pending)

Description

Task Description Implement CSS system to create hexagonal shapes using clip-path for categories.

Deliverable Reusable CSS classes to create perfect hexagonal shapes with clip-path.

Requirements

  • Hexagonal shape using CSS clip-path
  • Responsive at different sizes
  • Compatible with background images
  • Hover effects that maintain shape
  • Reusable across multiple components

Technical Requirements

  • CSS clip-path with hexagonal coordinates
  • Custom Tailwind classes
  • 1:1 aspect ratio to maintain proportion
  • Centered transform-origin for rotations

Content Updates Required

  • Clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%)
  • Classes: .hexagon, .hexagon-hover
  • Aspect ratio: aspect-square

Additional Notes

  • Test in different browsers
  • Fallback for browsers without support
  • Optimize for performance

Definition of Done

  • Perfect hexagonal shapes
  • Responsive at all sizes
  • Compatible with background images
  • Hover effects work
  • Reusable in other components

Contributor guide

Research direction
Implement the hexagonal clip path CSS classes as specified. Use the polygon coordinates provided. Ensure responsive sizing with aspect square and centered transform origin. Add hover effects while maintaining shape. Test in multiple browsers.
Tech stack
csstailwindcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSTailwindCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80