Clip-path, SVG et rectangle incurvé

Récemment au travail, j’essaie de trouver des nouvelles façons de développer l’interface d’un site web. Le dernier point que j’ai pu mettre en pratique concernait un design de site comprenant pas mal de courbes et de formes non-rectangulaire. Lors de la reflexion pour savoir comme j’allais pouvoir transformer ce design en code, j’ai cherché un moyen de faire un rectange avec le coté gauche qui serait incurvé, comme sur la capture d’écran ci-dessous.

Je souhaitais que la forme marche aussi sur des écrans plus petits tels que les mobiles, et ne soit pas pixelisée. C’est pourquoi, j’ai décidé de partir sur du svg.

J’ai donc commencé les recherches, mais je savais déjà qu’il était possible de cacher des parties d’une balise grâce à la propriété clip-path de CSS. En définissant clip-path: url(‘#svg-shape’); et en reliant cet id à ma forme svg, je pouvais donc cacher ma forme. Il me suffisait de créer la forme en svg.

J’ai donc crée mon chemin en svg, qui devait faire une forme rectangulaire incurvé sur le côté gauche. Cela m’a permis aussi d’apprendre à dessiner des chemins en SVG directement depuis le code. Pour cela j’utilise la balise <clipPath></clipPath> de SVG. Si je fais un chemin qui pars de en haut à gauche jusqu’à la droite, qui descend puis bifurque vers la gauche pour enfin faire une courbe vers le coin en haut à gauche du début, le tour est joué, puisque la propriété clip-path est appliquée.

Ca marche bien, cependant la forme n’est pas responsive, elle est limité à la taille que j’ai donnée au svg. Si je donne clipPathUnits="objectBoundingBox" à la balise clipPath, alors je peux transformer les coordonnées de mon chemin en valeur comprises entre 0 et 1, et cela fait un clip-path responsive.

Pour que vous compreniez mieux, voici le code final :

HTML

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae esse natus totam aperiam perspiciatis a officia cupiditate dolorum, fuga, cum corrupti magni tempora. Velit et, voluptatem pariatur nulla consequatur nesciunt.</p>
</div>

<svg viewbox="0 0 200 200">
    <clipPath id="svg-shape" clipPathUnits="objectBoundingBox">
        <path d="M 0 0 L 1 0 L 1 1 L 0 1 L 0 1 C 0.04 0.90 0.04 0.10 0 0 z" stroke="green" stroke-width="2px" fill="red" />
    </clipPath>
</svg>

CSS

div {
    background: #102251;
    max-width: 500px;
    padding: 50px;
    border-radius: 8px;
    margin: 30px auto;
    clip-path: url('#svg-shape');
    height: 150px;
}

svg {
    height: 200px;
}

p {
    color: white;
    font-family: 'Georgia';
    font-size: 1rem;
    line-height: 1.8rem;
}

Ce code n’est pas supporté par tous les navigateurs, que les plus récent, mais cela n’est pas grave car si ce n’est pas supporté, la forme redevient un rectangle, donc aucune fonctionnalité nécéssaire n’est mise en péril.