web-dev-qa-db-fra.com

Un moyen de limiter la longueur de la frontière?

Est-il possible de limiter la longueur d'une frontière? J'ai un <div> qui a une bordure inférieure, mais je veux ajouter une bordure à gauche du <div> qui ne s'étend que sur une moitié de la hauteur.

Est-il possible de le faire sans ajouter des éléments supplémentaires sur la page?

csscss3
192
mcbeav

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>
160
sObr

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;
}

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

233
TrevC

Le :after bascule :)

Si vous jouez un peu, vous pouvez même définir l’élément de bordure redimensionné pour qu’il apparaisse centré ou pour qu’il apparaisse uniquement s’il ya 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;
}

#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>
32
user2397120

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 sa width et height comme nous le souhaitons avec d'autres moyens.

Avec CSS (dégradé linéaire):

Nous pouvons utiliser linear-gradient() pour créer une ou plusieurs images d’arrière-plan et contrôler sa taille et sa position avec CSS afin qu’elles ressemblent à une bordure. Comme nous pouvons appliquer plusieurs images d’arrière-plan à un élément, nous pouvons utiliser cette fonctionnalité pour créer plusieurs bordures, comme des images, et les 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 d'arrière-plan.

HTML requis:

Tout ce dont nous avons besoin est un seul élément (éventuellement avoir une classe).

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

Étapes:

  1. Créez des images d’arrière-plan avec linear-gradient().
  2. Utilisez background-size pour ajuster la width/height de la ou des images créées ci-dessus de manière à ce qu'elle ressemble à une bordure.
  3. Utilisez background-position pour ajuster la position (comme left, right, left bottom etc.) de la ou des bordures créées ci-dessus.

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. Vous trouverez ci-dessous quelques exemples de bordures créées avec cette méthode.

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

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

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

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

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

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

Capture d'écran:

Output Image showing half length borders

15
Mohammad Usman

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 frontière. seulement hauteur d'élément.

14
Edmhs

Les frontières sont définies par côté seulement, pas par fractions de côté. Donc, non, vous ne pouvez pas faire ça.

En outre, un nouvel élément ne serait pas non plus une frontière, il ne ferait que simuler le comportement souhaité - mais ce serait tout de même un élément.

8
Ben

Une autre façon de faire consiste à utiliser une image frontière en combinaison avec un dégradé 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>

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

Prise en charge du navigateur: IE: 11+

Chrome: tous

Firefox: 15 ans et plus

Pour un meilleur support, ajoutez également des préfixes de fournisseur.

caniuse border-image

5
Daniel Z.

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, colorez votre contenu (couleur: blanc) et (en haut: environ 5 pixels) pour le rendre comme si le point n’était pas là.

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

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

  1. Créez le style de bordure gauche dont vous avez besoin en tant que graphique
  2. Positionnez-le à l'extrême gauche de votre div (laissez-le assez long pour gérer environ deux augmentations de taille de texte pour les anciens navigateurs)
  3. Définissez la position verticale à 50% du haut de votre div.

Vous aurez peut-être besoin de Tweak pour IE (comme d'habitude), mais ça vaut le coup d'essayer si c'est le design que vous recherchez.

  • Je suis généralement opposé à l'utilisation d'images pour quelque chose que CSS fournit de manière inhérente, mais parfois, si la conception en a besoin, il n'y a pas d'autre solution.
2
Kevin

Vous pouvez définir une bordure par côté uniquement. Il faudrait ajouter un élément supplémentaire pour cela!

1
Simon