Une façon de limiter la longueur de la bordure?
Réponses:
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>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>(note - la content: "";déclaration est nécessaire pour que le pseudo-élément soit rendu)
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;
}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 lewidth/heightdes images créées ci-dessus afin qu'elles ressemblent à une bordure. - Utilisez
background-positionpour ajuster la position (commeleft,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é:
Exemple avec bordure appliquée sur deux côtés:
Exemple avec bordure appliquée sur tous les côtés:
Capture d'écran:
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.
height. Pour remplacer la bordure de cellule dans une étiquette TD, utilisez <td>your content<hr/></td>.
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>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.
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;
}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.