Une façon de limiter la longueur de la bordure?

216

Existe-t-il un moyen de limiter la longueur d'une bordure. J'en ai un <div>qui a une bordure inférieure, mais je veux ajouter une bordure à gauche <div>qui ne s'étire que sur la moitié du chemin.

Existe-t-il un moyen de le faire sans ajouter d'éléments supplémentaires sur la page?

css mcbeav
la source

175

J'espère que cela t'aides:

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

Développer l'extrait

sObr
la source

5

Cela semble toujours la meilleure façon de le faire. Il est compatible avec plusieurs navigateurs et facile à entretenir.

Pim Schaaf

1

existe-t-il un moyen de le faire sur un cercle?

www139

1

appliquer l'ombre de boîte pour le cercle.

Piyush Dholariya

3

Cela peut avoir des avantages marginaux de compatibilité croisée entre les navigateurs par rapport aux anciens navigateurs et est plus facile à contrôler via JS ... mais aucun de ces problèmes ne concerne la question d'origine. Cependant, cela ajoute un élément supplémentaire au balisage que la question d'origine demande spécifiquement à éviter. Je ne comprends donc pas pourquoi c'est la réponse acceptée à cette question.

Spencer O'Reilly

Pour ce faire, avec: after ne nécessitera aucun balisage supplémentaire

Mark

257

Le contenu généré par CSS peut résoudre ce problème pour vous:

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

<div>Lorem Ipsum</div>

Développer l'extrait

(note - la content: "";déclaration est nécessaire pour que le pseudo-élément soit rendu)

TrevC
la source

21

Je pense que c'est sémantiquement une bien meilleure option, car elle n'introduit pas de div supplémentaires.

Louis Otto

21

Cela devrait être la réponse acceptée car elle privilégie le CSS comme seul moyen de style par rapport au balisage.

Lukas

4

Parfait. Et cela fonctionne comme prévu avec le rembourrage et la marge aussi.

Nolonar

4

Gardez à l'esprit: vous ne pouvez pas gérer les propriétés des pseudo-éléments à partir de JS (en fait, vous pouvez, mais ce sera très hacky). Donc, si vous prévoyez de faire une sorte de barre de progression avec cette solution - oubliez. Choisissez une réponse déjà acceptée. Dans tous les autres cas, cette réponse est meilleure, c'est vrai.

Sergei Panfilov

2

Ce navigateur croisé et / ou JS est-il compatible? Je préfère la réponse acceptée, à cause du commentaire de @ SergeyPanfilov.

matthaeus

36

Les :afterrochers :)

Si vous jouez un peu, vous pouvez même définir votre élément de bordure redimensionné pour qu'il apparaisse centré ou n'apparaisse que s'il y a un autre élément à côté (comme dans les menus). Voici un exemple avec un menu:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}

Afficher l'extrait de code

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Développer l'extrait

user2397120
la source

1

Pouvez-vous ajouter un exemple HTML? Comment pensez-vous de l'utiliser avec des cellules de tableau, un indice?

Peter Krauss

21

Avec les propriétés CSS, nous ne pouvons contrôler que l'épaisseur de la bordure; pas la longueur.

Cependant, nous pouvons imiter l'effet de bordure et contrôler son widthet heightcomme nous le voulons avec d'autres façons.

Avec CSS (Linear Gradient):

Nous pouvons utiliser linear-gradient()pour créer une ou des images d'arrière-plan et contrôler sa taille et sa position avec CSS afin qu'elle ressemble à une bordure. Comme nous pouvons appliquer plusieurs images d'arrière-plan à un élément, nous pouvons utiliser cette fonctionnalité pour créer plusieurs images de type bordure et appliquer sur différents côtés de l'élément. Nous pouvons également couvrir la zone disponible restante avec une couleur unie, un dégradé ou une image de fond.

HTML requis:

Tout ce dont nous avons besoin, c'est d'un seul élément (ayant éventuellement une certaine classe).

<div class="box"></div>

Pas:

Créez des images d'arrière-plan avec linear-gradient().
Utilisez background-sizepour régler le width/ heightdes images créées ci-dessus afin qu'elles ressemblent à une bordure.
Utilisez background-positionpour ajuster la position (comme left, right, left bottometc.) des frontières au- dessus créé (s).

CSS nécessaire:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

Exemples:

Avec, linear-gradient()nous pouvons créer des bordures de couleur unie ainsi que des dégradés. Voici quelques exemples de bordures créées avec cette méthode.

Exemple avec bordure appliquée sur un seul côté:

Afficher l'extrait de code

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Développer l'extrait

Exemple avec bordure appliquée sur deux côtés:

Afficher l'extrait de code

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Développer l'extrait

Exemple avec bordure appliquée sur tous les côtés:

Afficher l'extrait de code

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Développer l'extrait

Capture d'écran:

Mohammad Usman
la source

14

pour les lignes horizontales, vous pouvez utiliser la balise hr:

hr { width: 90%; }

mais il n'est pas possible de limiter la hauteur de la bordure. seule hauteur d'élément.

Edmhs
la source

Oui, ici "largeur" est la "longueur de ligne HR". Pour quelque chose comme une largeur de bordure, utilisez la taille d'attribut HR ou CSS height. Pour remplacer la bordure de cellule dans une étiquette TD, utilisez <td>your content<hr/></td>.

Peter Krauss

8

Les bordures sont définies par côté uniquement, pas en fractions de côté. Donc, non, vous ne pouvez pas faire ça.

De plus, un nouvel élément ne serait pas non plus une bordure, il imiterait seulement le comportement que vous souhaitez - mais ce serait quand même un élément.

Ben
la source

7

Une autre façon de procéder consiste à utiliser border-image en combinaison avec un gradient linéaire.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

<div></div>

Développer l'extrait

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

Prise en charge du navigateur: IE: 11+

Chrome: tous

Firefox: 15+

Pour une meilleure prise en charge, ajoutez également des préfixes de fournisseur.

caniuse border-image

Daniel Z.
la source

5

C'est une astuce CSS, pas une solution formelle. Je laisse le code avec la période noire car cela m'aide à positionner l'élément. Ensuite, coloriez votre contenu (couleur: blanc) et (margin-top: -5px environ) pour faire comme si la période n'était pas là.

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

Justin Munce
la source

2

Une autre solution consiste à utiliser une image d'arrière-plan pour imiter l'apparence d'une bordure gauche

Créez le style de bordure gauche dont vous avez besoin sous forme de graphique
Positionnez-le à l'extrême gauche de votre div (faites-le assez long pour gérer environ deux augmentations de la taille du texte pour les navigateurs plus anciens)
Réglez la position verticale à 50% du haut de votre div.

Vous devrez peut-être modifier pour IE (comme d'habitude), mais cela vaut la peine si c'est la conception que vous recherchez.

Je suis généralement contre l'utilisation d'images pour quelque chose que CSS fournit intrinsèquement, mais parfois si la conception en a besoin, il n'y a pas d'autre moyen de le contourner.

Kevin
la source

1

Vous ne pouvez définir qu'une seule bordure par côté. Il faudrait ajouter un élément supplémentaire pour ça!

Simon
la source

Une façon de limiter la longueur de la bordure?

Réponses:

Avec CSS (Linear Gradient):