Bordure courbe avec trait en CSS pur ?

Question

Je me demande s'il est possible d'obtenir une bordure incurvée (avec un trait) en utilisant uniquement le CSS ? Pour l'instant, je crée des bordures courbes pour l'en-tête de mon site web en utilisant des images :

J'aimerais passer à une solution CSS afin de ne pas avoir à modifier les images lorsque la quantité de contenu change - j'ai besoin qu'elles soient dynamiques et réactives, j'ai réussi à dessiner une courbe en utilisant border-radius :

Cela fonctionne beaucoup mieux pour moi, mais je me demande s'il est possible d'ajouter un trait à l'image pour qu'elle ressemble davantage à la représentation de l'image ? Toute aide sera grandement appréciée. Voici le code que j'ai écrit pour y parvenir :

<div class="slider">
  <div class="slide">
    <!-- Content -->
  </div>
</div>

CSS :

.slider {
  background: #21639e;
}
.slider .slide {
  background: url("image.jpg") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
}

J'ai essayé d'ajouter border-bottom: 5px solid #fff; à la classe .slide, mais cela a fini par ressembler à ceci :

J'ai créé un jsfiddle pour que vous puissiez tester ce que j'essaie de faire.

Answer 1

Oui, vous pouvez essayer d'utiliser des ombres de boîte pour créer ce type de bordure. L'application d'une ombre blanche sur le côté extérieur de l'élément lui donnera l'aspect d'un trait ou d'une bordure.

Ce - border-bottom: 5px solid #fff; produit un effet différent car nous n'appliquons que la bordure inférieure à l'élément. Les bordures de gauche et de droite sont inexistantes ( largeur zéro ), de sorte que la ligne s'amincit au fur et à mesure que l'on se rapproche des bords.

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  height: 200px;  
  background: url("http://placehold.it/800x800/FF00FF") no-repeat #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>

Vous trouverez ci-dessous une version actualisée de votre Violon .

---

Pour obtenir une courbe plus gracieuse, vous pouvez également essayer l'approche ci-dessous. Elle utilise un pseudo-élément plus large que l'élément .slide et centre l'image à l'intérieur de celle-ci. ( Je pense que cette approche donne un aspect plus proche de l'image originale, mais c'est à vous de choisir. )

.slider {
  height: 500px;
  background: #21639e;
}
.slider .slide {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.slider .slide:before {
  position: absolute;
  content: '';
  left: -2%;
  top: -6px;
  width: 104%;
  height: 100%;
  background: url("http://placehold.it/800x800/FF00FF") no-repeat center center #21639e;
  border-radius: 100%/0 0 30px 30px;
  box-shadow: 0px 6px 0px white;
}

<div class="slider">
  <div class="slide">
    Some content
  </div>
</div>