De toute façon à la longueur de la frontière limite?

Question

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

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

Answer 1

Hope this helps:

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

Answer 2

contenu généré par CSS peut résoudre 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 de content: ""; est nécessaire pour que le pseudo-élément pour rendre)

Answer 3

Les roches :after:)

Si vous jouez un peu, vous pouvez même définir votre élément de frontière redimensionnée pour décentrée ou apparaître 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;
}

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

Answer 4

  

Avec des propriétés CSS, on ne peut contrôler l'épaisseur de la frontière; pas la longueur.

Cependant, nous pouvons imiter l'effet frontière et contrôler son width et height que nous voulons avec d'autres façons.

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

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

Obligatoire HTML:

Nous avons juste besoin d'un seul élément (peut-être avoir une classe).

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

Étapes:

1. Créer une image de fond (s) avec linear-gradient().
2. Utilisez background-size pour régler le width / height d'image ci-dessus créé (s) de sorte qu'il ressemble à une frontière.
3. Utilisez background-position pour ajuster la position (comme left, right, left bottom etc.) 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 d'avoir des gradients. Voici quelques exemples de frontière créés avec cette méthode.

Exemple de bordure appliquée sur 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 de 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 bordure appliquée sur 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:

Answer 5

pour les lignes horizontales, vous pouvez utiliser hr tag:

hr { width: 90%; }

mais ce ne est pas possible à la hauteur de la frontière limite. que la hauteur de l'élément.

Answer 6

frontières sont définies de chaque côté, et non en fractions d'un côté. Donc, non, vous ne pouvez pas faire cela.

En outre, un nouvel élément ne serait pas une frontière soit, il ne ferait que mimer le comportement que vous voulez -. Mais il serait encore un élément

Answer 7

Une autre façon de le faire est d'utiliser la frontière d'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>

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

---

Support du navigateur: IE: 11 +

Chrome: tous

Firefox: 15 +

Pour un meilleur support ajouter également préfixes fournisseurs.

caniuse frontière image

Answer 8

Ceci est une astuce CSS, pas une solution formelle. Je laisse le code avec le noir de la période, car elle me permet de positionner l'élément. Par la suite, la couleur de votre contenu (couleur: blanc) et (margin-top: -5px environ). De faire comme si la période n'est pas là

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

Answer 9

Une autre solution est que vous pouvez utiliser une image de fond pour imiter l'apparence d'une frontière gauche

1. Créer le style de bordure gauche vous avez besoin en tant que graphique
2. Position à l'extrême gauche de votre div (faire assez longtemps pour traiter environ deux la taille du texte augmente pour les anciens navigateurs)
3. Définir la position verticale de 50% par rapport au sommet de votre div.

Vous devrez peut-être modifier pour IE (comme d'habitude), mais il vaut le coup si c'est la conception que vous allez pour.

• Je suis généralement contre l'utilisation des images pour quelque chose qui fournit des CSS en soi, mais parfois si la conception a besoin, il n'y a pas d'autre moyen autour de lui.

Answer 10

Vous pouvez définir une frontière par côté. Vous devez ajouter un élément supplémentaire pour cela!