Border-radius et redimensionnement.

Bonjour,

Je dispose d'un <h2> simple avec à l'intérieur un <span>. Le <span> dispose d'un border-radius afin de rendre l'élément plus agréable. Cependant lors du redimensionnement, l'effet est vraiment très désagréable. Existe t-il selon vous une solution à ce problème, pour garder l'arrondi ? Je sais bien qu'avec le Css je peux enlever l'arrondi en dessous d'une certaine taille de fenêtre, mais je souhaiterais le garder.



Merci d'avance

Hello,

Trouver chez Zurb (à adapter si tu n'as pas besoin; de différentes couleurs, différentes tailles de polices + correction des préfixes qui n'ont plus lieu d'être).
Tu as également la possibilité de mettre une image en arrière plan en CSS (début de l'image sur le titre, fin de l'image sur le span, l'utilisation des pseudo élément :before/:after est sans doute possible également).
Si cela ne correspond pas à ton besoin, peut-on voir à quoi ressemblent tes codes ?

Bonjour.

Tu peux trouver une solution sur cette page http://iamvdo.me/blog/box-decoration-break-son-support-progresse, mais ça ne marche pas dans tous les navigateurs.

Ça rend très bien dans Chrome, moins bien dans IE11 et pas du tout dans Firefox.

Bonne continuation.
Modifié par thierry (02 Jun 2014 - 14:23)

Bonsoir,

si jouer avec direction + pseudo + position ne te gènes pas , tu peut tenter quelque chose du genre : http://codepen.io/gc-nomade/pen/Iuwvy .

base :

h2 {
  position:relative;
  display:table;
  padding:0 0.5em;
  margin:1em auto;
  line-height:1.8em;
}

h2:after,
h2:before,
h2 span {  
  border-radius:5px;
  background-color:#2D6093;
  background:linear-gradient(to bottom,#2D6093,#003366 );
  padding:0.2em;
  }
h2:after, h2:before {
  content:'';
  margin:0 -0.3em;
  position:relative;
  z-index:-1;
}
h2 span{
  direction:rtl; 
  -ms-writing-mode: lr-tb;/* no workaround for IE without bugging */
}

Sauf Ie, ma premiere et derniere ligne auront des bords arrondis a gauche comme à droite.