Sidebar incurvée

amethyste
Les bases HTML/CSS

Bonjour,
Je souhaite réaliser une sidebar incurvée comme dans la créa ci-dessous, mais avec quelques contraintes :

  • sans jpeg, png, gif,...

  • hauteur 100%

  • il y a une ombre portée qui vient en transparence par-dessus le contenu de droite

Je galère comme un malade à faire un truc de propre , donc si quelqu'un a une idée, je suis preneur. Au pire je pense essayer avec les svg.

3 réponses

Arrows78

Bonjour,

Il n'est pas possible de voir ton image.

amethyste
Auteur

Oops, voilà corrigé

Arrows78

Tu pourrais faire soit deux images mais tu ne veux pas, ou soit quelque chose de ce genre :

HTML

<div class="forme"></div>

CSS 

.forme
{
    height: 200px;
    width: 100px;
    background: #BABFE3;
    position: relative;
}
.forme:after
{
    content: "";
    background: #000000;
    border-top-left-radius: 50px 100px;
    border-bottom-left-radius: 50px 100px;
    height: 200px;
    width: 50px;
    position: absolute;
    right: 0;
}

Dans le css, j'ai volontairement mis l'arriere plan (du after) en noir pour que tu vois le résultat, mais suffit de le mettre de la couleur du fond de ton site.

Avec cette méthode, il faut que tu adaptes par rapport à ce que tu souhaites faire, si c'est de l'autre côté, tu auras before et non after, après à toi de modifier les réglages pour la taille notamment.