css border-left 50% de la hauteur

Je veux le bord gauche de mon div pour afficher uniquement à la moitié de la div. De même je tiens à le faire à ma droite frontière, mais doit être réglé à partir du bas de la div au milieu de la div. Comment puis-je l'atteindre?

  • vous ne pouvez pas le faire directement. il y a plusieurs façons de résoudre ce problème. mais d'abord, avez-vous une largeur fixe et/ou la hauteur?
  • Vous aurez à faire semblant. Images, js, faux divs...
  • oui, c'est une largeur fixe. Je sais que je peux le faire en spécifiant certaines Images etc. et comment puis-je le faire en utilisant JS?
InformationsquelleAutor niao | 2010-05-14
  1. 13

    Bonne question. Il n'est pas possible à l'aide de la frontière de la propriété.

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

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

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

    Rappelez-vous, l'entourant de div doit être position: relative pour que cela fonctionne. Je ne suis pas sûr que les 50% de la hauteur de réglage de travailler de façon constante tout au long de navigateurs - assurez-vous de le tester. Vous pouvez avoir recours à des pixels mesures si elle ne le fait pas.

    • vraiment incroyable, c'est ce que je suis lookin' pour...
    InformationsquelleAutor Pekka 웃
  2. 36

    Une sorte de similaire, mais différent de l'approche de @Pekka s: utilisez les :after pseudo-sélecteur, comme suit:

    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.

    • Note de côté, car c'est l'une de mes plus populaires réponses: vous pouvez également utiliser le :before pseudo-sélecteur si vous le souhaitez. Choix du concessionnaire. La seule raison pour laquelle j'ai utilisé :after ici, c'est parce que je profiter de la hiérarchie visuelle, de sorte que le chose au fond va :after.
    InformationsquelleAutor indextwo
  3. 4

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

    css border-left 50% de la hauteur

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

    Outil: L'Éditeur De Dégradé

    Puis-je Utiliser : border-image (IE11)

    InformationsquelleAutor l2aelba
  4. 3

    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 la div.

    • Merci Cela fonctionne pour moi
    InformationsquelleAutor Natan Graaf