Insertion de la forme du rayon de la bordure en CSS ?

Question

Y a-t-il un moyen de créer cette forme d'image en CSS ? La partie dégradée n'est pas importante, c'est la courbe en bas à droite que je ne vois pas comment faire. J'ai vu plusieurs plugins d'angle jQuery mais rien qui ne fonctionne pour moi jusqu'à présent. Je ne peux pas utiliser d'image d'arrière-plan car le contenu sera de longueur variable.

Edit : Merci pour les réponses, très impressionnant ! Une chose cependant - dans l'image elle-même, il y a un fond bleu ET une bordure grise sans couture autour de l'ensemble, y compris la courbe sur la droite. Peut-être qu'il est impossible de conserver cette bordure si la solution implique des "bidouillages" de rayon de bordure sur des éléments supplémentaires, mais si celle-ci pouvait être conservée également, ce serait plus agréable.

Answer 1

J'ai créé un petit quelque chose. Il y a probablement une meilleure solution, mais peut-être que cela vous aidera.

jsFiddle

CSS :

.bubble {
    width: 200px;
    height: 30px;
}

.bubble .content {
    background: #00f;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
}

.bubble .blue,
.bubble .white,
.bubble .white .innerwhite {
    width: 10px;
    height: 100%;
    float: right;
}

.bubble .blue {
    background: #00f;
    border-top-right-radius: 10px;
}

.bubble .white {
    background: #00f;
}

.bubble .white .innerwhite {
    background: #fff;
    border-bottom-left-radius: 10px;
}

HTML :

<div class="bubble">
    <div class="white">
        <div class="innerwhite"></div>
    </div>
    <div class="blue"></div>
    <div class="content"></div>
</div>

Answer 2

Voici le CSS de la forme. Vous avez besoin de plusieurs formes pour accomplir ce que vous voulez.

body{background:white;}

.Shape{margin:20px 30px;}

.Shape1{
  position:relative;
  width:200px;
  height:65px;
  background:blue;
  border-radius:20px;
  border:2px solid white;
  z-index:2;
  top:0px;
  left:0px;}

.Shape2{

  position:relative;
  width:70px;
  height:40px;
  background:blue;
  border-radius:12px;
  border-bottom:2px solid white;
  z-index:3;
  top:-42px;
  left:170px;}

.Shape3{
  position:relative;
  width:20px;
  height:20px;
  background:blue;
  z-index:4;
  top:-64px;
  left:170px;}

.Shape4{
   position:relative;
   width:40px;
   height:46px;
   background:white;
   top:-110px;
   left:202px;
   z-index:3;
   box-shadow:inset 2px 0px 4px lightgray;
   border-bottom-left-radius:40px;}

.Shape5{
  position:relative;
  height:1px;
  width:218px;
  background:transparent;
  box-shadow:0px 0px 8px black;
  left:18px;
  top:-110px;}

.Shape6{
  position:relative;
  height:50px;
  width:20px;
  background:white;
  top:-160px;
  left:236px;
  z-index:4;}

.Shape7{
  position:relative;
  height:10px;
  width:50px;
  background:white;
  top:-210px;
  left:203px;
  z-index:4;}

Et le HTML :

  <div class="Shape">

  <div class="Shape1"></div>
  <div class="Shape2"></div>
  <div class="Shape3"></div>
  <div class="Shape4"></div>
  <div class="Shape5"></div>
  <div class="Shape6"></div>
  <div class="Shape7"></div>

  </div>

Voici un JsBin pour l'application sortie .

Answer 3

Une bordure arrondie ne peut pas être réalisée avec le CSS standard sur un seul objet DOM, mais vous pouvez utiliser le CSS pour le faire en ajoutant des éléments supplémentaires.

L'astuce consiste à utiliser l'option CSS :before y :after pour créer effectivement un élément supplémentaire de part et d'autre de l'élément principal, puis utiliser les sélecteurs appropriés de l'option border-radius y background pour le mettre en forme.

Ce n'est pas facile, mais c'est devenu une astuce assez courante de l'utiliser pour les onglets. Par exemple, voir ici pour un bon tutoriel.

J'espère que cela vous aidera.