Geometric Shape Presets
Polygon Vertices (3)
Point 1
X Axis50%
Y Axis0%
Point 2
X Axis0%
Y Axis100%
Point 3
X Axis100%
Y Axis100%
Canvas Preview Options
Show Vertex Points & Outlines
Real-Time Clipped Canvas
Clipped Visual
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Como criar máscaras com clip-path
- 1Escolha um modelo inicial (Triângulo, Hexágono, Estrela, Seta) ou crie do zero.
- 2Arraste os vértices no canvas para personalizar o desenho geométrico.
- 3Copie a regra CSS `clip-path: polygon(...)` gerada.
Recortes Acelerados pela GPU
A propriedade CSS `clip-path` é renderizada diretamente na GPU do navegador, entregando alta performance em comparação com máscaras de imagem.
Architecture & Privacy
- Full WebKit Vendor Prefixes: Includes standard clip-path and -webkit-clip-path for complete iOS Safari support.
- Polygon percentage coordinates: Scales responsively with any aspect ratio container.
- SVG Vector Wireframe Overlay: Shows numbered anchor points and connect lines in real time.
- Zero runtime library overhead: Pure client-side calculations rendered directly through the CSS engine.
Perguntas Frequentes (FAQ)
Ferramentas Relacionadas
Popular
Gerador de Glassmorphism CSS (Efeito Vidro Fosco)
Crie cartões translúcidos com efeito de vidro fosco e desfoque em tempo real
Launch tool→
Popular
Gerador de Sombras (box-shadow) CSS em Camadas
Crie sombras suaves, realistas e multicamadas com profundidade inset personalizada
Launch tool→
Trending
Gerador de Gradientes CSS (Linear e Radial)
Crie gradientes lineares, radiais e cônicos com paradas de cores interativas e exportação CSS
Launch tool→
Gerador de Bordas Arredondadas Orgânicas (8 Valores)
Crie formas orgânicas, fluidas e assimétricas usando a sintaxe avançada de 8 valores
Launch tool→