bordure css - à gauche 50% Hauteur

je veux que la bordure gauche de ma div n'apparaisse qu'à la moitié de la div. La même chose que je voudrais faire à ma frontière droite mais est devrait être placé du bas de la div au milieu de la div. Comment puis-je l'atteindre?

23
demandé sur Piotr Ptak 2010-05-15 00:35:06

4 réponses

bonne question. C'est impossible d'utiliser la propriété border.

La seule chose qui vient à l'esprit, si vous pouvez configurer votre div positionrelative, est d'utiliser un absolument positionné, 1 pixel de large div. Pas testés, mais ce devrait:

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

vous feriez la même chose du côté droit, en remplaçant le left propriété right.

Rappelez-vous, les environs div doit être position: relative pour que cela fonctionne. Je suis pas sûr de savoir si le réglage de hauteur de 50% fonctionnera de façon uniforme dans tous les navigateurs - assurez-vous de le tester. Vous devrez peut-être recourir à des mesures pixel si ce n'est pas le cas.

12
répondu Pekka 웃 2010-05-14 20:42:00

une sorte d'approche similaire mais différente de @Pekkka'S: utilisez le :after pseudo-selecteur, like so:

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

29
répondu indextwo 2014-01-24 17:17:48

Vous pouvez utiliser:

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

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

2
répondu Natan Graaf 2014-02-13 04:12:25

2018:les navigateurs modernes:

Vous pouvez utiliser border-image avec des gradients de 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 Gradient

Puis-Je Utiliser :border-image (IE11)

2
répondu l2aelba 2018-01-23 12:44:11