web-dev-qa-db-fra.com

css border-left 50% hauteur

Je veux que la bordure gauche de mon div ne s'affiche que pour la moitié du div. La même chose que je voudrais faire pour ma bordure droite, mais elle doit être réglée du bas du div au milieu du div. Comment puis-je y parvenir?

cssborder
27
niao

Bonne question. Il n'est pas possible d'utiliser la propriété border.

La seule chose qui vous vient à l'esprit, si vous pouvez définir position sur relative, est d'utiliser un div de 1 pixel de largeur absolue. Pas complètement testé mais cela devrait fonctionner:

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

Vous feriez de même sur le côté droit, en remplaçant la propriété left par right.

N'oubliez pas que le div environnant doit être position: relative pour que cela fonctionne. Je ne sais pas si le paramètre 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 en pixels si ce n'est pas le cas.

13
Pekka 웃

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

Balisage HTML: 

<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 faire bonne mesure.

37
indextwo

2018: Pour les 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;

enter image description here

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

Outil: Éditeur de dégradé

Puis-je utiliser: border-image (IE11)

4
l2aelba

Vous pouvez utiliser:

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

Le texte est visible, mais la couleur de la bordure ne correspond qu'à la moitié de la taille div.

3
Natan Graaf