css frontière-gauche 50% hauteur

Je veux que la bordure gauche de mon div ne montre que la moitié de la div. La même chose que je voudrais faire à ma frontière droite, mais devrait être définie à partir du bas de la div au milieu de la div. Comment puis-je y arriver?css frontière-gauche 50% hauteur

Source

2010-05-14 Piotr Ptak

vous ne pouvez pas le faire directement. Il y a plusieurs façons de résoudre cela. mais d'abord, avez-vous une largeur et/ou une hauteur fixes? – choise

Vous devrez faire semblant. Images, js, fausses divs ... –

oui, c'est une largeur fixe. Je sais que je peux le faire en spécifiant quelques images etc. et comment puis-je faire cela en utilisant JS? –

Bonne question. Ce n'est pas possible en utilisant la propriété border.

La seule chose qui vient à l'esprit, si vous pouvez définir position de votre div à relative, est d'utiliser un div en position absolue, 1 pixel de large. Pas complètement testé mais cette devrait travail:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
      background-color: blue; overflow: hidden'> 
&nbsp; 
</div>

Tu ferais la même chose sur le côté droit, en remplacement de la propriété left par right. Rappelez-vous, le div environnant doit être position: relative pour que cela fonctionne. Je ne suis pas sûr de savoir si le réglage de hauteur de 50% fonctionnera de manière cohérente dans tous les navigateurs - assurez-vous de le tester. Vous devrez peut-être recourir à des mesures de pixels si ce n'est pas le cas.

Source

2010-05-14 20:42:00

vraiment incroyable, c'est que je cherche ... –

Une tri d'approche similaire, mais différente de @ Pekka de: utiliser le pseudo-sélecteur :after, comme ceci:

HTML Markup:

<div class="mybox"> 
    Le content de box. 
</div>

CSS:

.mybox { 
    position: relative; 
    padding: 10px 20px; 
    background-color: #EEEEEE; 
} 

.mybox:after { 
    content: ''; 
    position: absolute; 
    bottom: 0px; 
    left: 25%; 
    width: 50%; 
    border-bottom: 1px solid #0000CC; 
}

... et un jsFiddle pour une bonne mesure.

Source

2014-01-24 17:17:48 indextwo

Note latérale, comme c'est l'une de mes réponses les plus populaires: vous pouvez également utiliser le pseudo-sélecteur ': before 'si vous le souhaitez. Le choix du concessionnaire. La seule raison pour laquelle j'ai utilisé ': after' est parce que j'apprécie la hiérarchie visuelle, donc le _thing à la bottom_ va': after'. – indextwo

Vous pouvez utiliser:

line-height:50%; /*(or less, much less)*/ 
overflow:visible;

Le texte est visible, mais la couleur de la bordure sera seulement à la moitié de la taille de div.

Source

2014-02-13 04:12:25

Thanks Cela fonctionne pour moi – NaveenDA

2018: Pour navigateurs modernes:

Vous pouvez utiliser border-image avec des dégradés quelque chose comme ...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%); 
border-image-slice: 1;

Démo:https://jsfiddle.net/hz8wp0L0/

Outil:Gradient Editor

Puis-je utiliser:border-image(IE11)

Source

2018-01-23 10:22:39 l2aelba

css frontière-gauche 50% hauteur

Répondre

Questions connexes