Efeito Hover com Raio Invertido em CSS

1. O que é Raio Invertido?

Uma técnica para criar cantos "recuados" usando border-radius negativo, ideal para:

• Efeitos de hover modernos
• Transições suaves entre elementos
• Designs orgânicos e fluidos

2. Implementação Básica

.elemento {
        border-radius: 15px;
        transition: all 0.3s ease;
    }
    
    .elemento:hover {
        clip-path: inset(0 round 15px 0 15px 0);
    }

3. Técnicas Principais

4. Exemplo Completo

<div class="card">
        <div class="card-content">
            <h3>Título</h3>
            <p>Conteúdo do card com efeito hover</p>
        </div>
    </div>
    
    <style>
    .card {
        border-radius: 20px;
        overflow: hidden;
        transition: clip-path 0.4s;
    }
    
    .card:hover {
        clip-path: inset(10px round 0 20px 0 20px);
    }
    </style>

5. Compatibilidade

• Chrome 55+ ✅
• Firefox 54+ ✅
• Safari 13.1+ ✅
• Edge 79+ ✅

6. Aplicações Práticas

6.1 Cards Interativos

.product-card:hover {
        clip-path: inset(8px round 0 25px 0 25px);
    }

6.2 Menu de Navegação

.nav-item:hover {
        clip-path: inset(5px round 15px 0 15px 0);
    }

6.3 Progress Bars

.progress-bar:hover {
        clip-path: inset(2px round 10px 10px 0 0);
    }