2011-02-02 3 views
0


Je veux faire un design css comme ceci
--------------------- U ----- |
Je ne pouvais pas dessiner le dessin exact ici. mais la largeur de la forme en U doit être étendue pour s'adapter aux liens. c'est possible?bordure courbe en css

Répondre

3

Il est difficile de déchiffrer exactement ce que vous recherchez juste à partir de cette description. La démonstration en mode texte n'explique pas vraiment très bien :-)

Cette pourrait peut-être être réalisé en utilisant CSS border-radius, mais si je l'interprète correctement votre demande, il sonne comme une mise en page complexe tout à fait.

border-radius ne fait que des coins arrondis - c'est-à-dire les quatre coins d'une boîte. Donc, si vous avez besoin d'une mise en page plus complexe, vous aurez besoin de plusieurs boîtes avec des coins arrondis, positionnés de façon appropriée pour obtenir l'effet désiré.

Vous pouvez peut-être y parvenir avec seulement des coins arrondis sur la boîte de conteneur pour la maison/sur les liens que vous avez mentionnés. Si cela ne vous permet pas d'obtenir ce dont vous avez besoin, il me semble que vous avez besoin d'un graphique plutôt que d'une bordure CSS.

Si le CSS border-radius fonctionne pour vous, gardez à l'esprit que la fonctionnalité border-radius n'est pas supportée sur IE. Les bonnes nouvelles sont qu'il ya un hack pour IE appelé CSS3Pie qui corrige cela, de sorte que vous pouvez utiliser border-radius dans tous les navigateurs.

Espérons que cela fonctionne pour vous.

+0

+ 1 pour m'avoir prouvé que je m'étais trompé et en train de m'éduquer. – Rich

+0

Merci spudley, oui je ne veux pas coins arrondis mais je ne sais pas comment – VKGS

+0

Merci spudley, oui je ne veux pas coins arrondis mais je ne sais pas comment
dessiner que ici .. mais ce sera comme ça. La ligne commence de gauche à droite et après avoir atteint les 3/4 de la largeur, il descend en pente douce et strightens .. pouvez-vous imaginer? – VKGS

2

http://border-radius.com/ CSS Border Rayon Générateur

+0

ceci est pour CSS3 que –

+1

Ok, mais sans images, il n'y a pas d'option non CSS3 pour les coins arrondis – benhowdle89

+0

@Richard et @ benhowdle89 - en fait border-radius peut être fait pour travailler pour * tous * les navigateurs, y compris IE - voir ma réponse. – Spudley

1

Vous ne pouvez le faire avec CSS3 mais vous pouvez utiliser des choses comme spiffy corners à la place.

+0

CSS3 'border-radius' peut être fait pour fonctionner dans IE. – Spudley

0

Si vous voulez rester compatible avec les anciens navigateurs, alors vous ne pouvez pas le faire en CSS, vous devrez le faire avec des graphiques. IE 8 et ci-dessous ne le fera pas, pas sûr d'autres navigateurs, mais gardez à l'esprit le rayon de la frontière est tout à fait nouveau.

+0

Je le reprends, Spudley a bien raison. Voir ci-dessous. – Rich

0

Voici un exemple:

<style type="text/css"> 
div.test 
{ 
width: 115px; 
padding: 10px; 
border: 2px solid #000; 
border-radius: 15px; 
-moz-border-radius: 15px; 
} 
</style> 
<div class="test">This is some text!</div>