Comment créer des coins arrondis flexibles?

Creating Flexible corner http://i44.tinypic.com/29d4ih.jpg Comment créer des coins arrondis flexibles?

Je veux créer des coins flexibles basés sur DIV. comme indiqué dans l'image. Ce n'est pas un coin arrondi régulier, mais quelque chose de plus compliqué. C'est quelque chose comme défi.

Et s'il vous plaît Note que je veux coins arrondis Image, donc s'il vous plaît donner une réponse selon requirments.

Merci beaucoup

Source

2009-05-04 Wasim Shaikh

Serais-je tiré si je suggérais

s? ;) –

Oui :), plus de tables. –

@ricebowl encore j'attends quelques bons paquets, je vais attendre 48h pour cela –

Répondre

Vous devriez examiner l'approche The Thrashbox pour cela.

Source

2009-05-04 05:43:36 ddrace

Ouais ..... Ce que je voulais .. merci beaucoup Lot DDrace –

@ddrace accepté Si vous aimez mon Q. alors s'il vous plaît Votez. :) –

vous devriez être en mesure de le faire avec 9 divs explicitement taille et flottaient. les divs de coin sont de taille fixe et ont une URL de fond pour les 4 coins et les divs latéraux sont répétition-y et divs de haut en bas ont repeat-x

Source

2009-05-04 04:32:34

Vous pouvez utiliser une série de travées et 4 images, une pour chaque coin , pour faire un div arrondi redimensionnable. Comme ceci:

div { 
    background: white url(topleft.gif) top left no-repeat; 
} 

div span { 
    display: block; 
    background: url(topright.gif) top right no-repeat; 
} 

div span span { 
    background: url(bottomright.gif) bottom right no-repeat; 
} 

div span span span { 
    padding: 2em; 
    height: 0; /* fixes a padding bug in IE */ 
    background: url(bottomleft.gif) bottom left no-repeat; 
} 

div span span > span { 
    height: auto; /* sets the height back to auto for all other browsers */ 
}

Et maintenant pour le HTML:

<div><span><span><span>Round corners!</span></span></span></div>

Pour un exemple réel et le code s'il vous plaît se référer à this page pour un exemple de travail et le code source.

Source

2009-05-04 04:43:25

malheureusement cela ne s'affiche pas correctement sur IE7 .. :( –

Wow votre droite, je vais éditer mon post après que je trouve une solution –

Eh bien, la meilleure réponse est: l'utilisation CSS3:

#roundedCornerDiv { 
    -moz-border-radius: 1em;  /* for mozilla-based browsers */ 
    -webkit-border-radius: 1em; /* for webkit-based browsers */ 
    border-radius: 1em;   /* theoretically for *all* browsers 
            dependant on implementation of CSS3 */ 
    border: 12px solid #ccc; 
}

Source

2009-05-04 04:44:06

I Je suis heureux que vous avez mentionné ceux-ci, je oublie toujours de les utiliser lors de la conception des panneaux de contrôle que je ne veux pas inonder de ressources (ect coins ronds ect.) –

Et il fonctionne dans tous les navigateurs actuels – stesch

n'utilisant pas les images selon le (clarifié) question –

border-radius: 10px 10px 10px 10px;

est d'abord le coin supérieur gauche. deuxième est le coin supérieur droit. troisième est le coin inférieur droit. quatrième est le coin inférieur gauche.

vous pouvez l'utiliser essentiellement dans n'importe quelle étiquette où vous voulez les coins arrondis. rappelez-vous de préciser la frontière comme:

border: 2px solid black;

si vous spécifiez la frontière séparément, par exemple:

border-left: 6px; 
border-right: 6px; 
border-top: 2px; 
border-bottom: 2px;

vous pouvez obtenir des trucs super prospectifs.

Source

2013-01-16 12:50:05

Questions connexes