Un moyen de déclarer une taille / bordure partielle à une boîte?

104

Un moyen de déclarer une taille / bordure partielle à une boîte en CSS? Par exemple, une boîte avec 350pxqui montre seulement une bordure en bas dans ses premiers 60px. Je pense que cela pourrait être très utile.

Exemples:

entrez la description de l'image ici entrez la description de l'image ici

css border Davidmatas
la source

Réponses:

154

Pas vraiment. Mais il est très facile d'obtenir l'effet d'une manière qui se dégrade gracieusement et ne nécessite aucun balisage superflu:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>
Développer l'extrait

bookcasey
la source
3
Rien de tel que d'être marqué comme la bonne réponse sans +1. Mais je t'ai attribué +1! C'était une solution parfaite pour mon problème. Merci! edit Je suppose que vous auriez pu être +1 OP et -1 par quelqu'un d'autre. Tant pis. J'apprécie votre réponse, et c'est tout ce qui compte, non ;-)
CWSpear
7
Comment obtenez-vous que cela soit au centre, comme dans son deuxième exemple?
Cameron Martin
Je devrais ajouter, lorsque l'élément parent est un élément de bloc en ligne de largeur fluide. Évidemment, avec une largeur fixe, c'est facile.
Cameron Martin
4
Peu importe , j'ai eu l'effet que je voulais - dabblet.com/gist/e5a78f2d4bf50b6be4d3 . Il est dommage les ::outsideet ::insidepseudo-éléments ne sont pas encore disponibles, je déteste mettre dans le balisage juste pour le style, mais je ne pense pas qu'il y ait une autre façon.
Cameron Martin
Cela marche! Pour l'utiliser avec React, vous ne pouvez pas l'utiliser contenten :aftertant que style en ligne ou JSS, mais cela fonctionne bien en utilisant des composants stylisés.
Raphael Pinel
23

Je sais, cela est déjà résolu et des pixels ont été demandés. Cependant, je voulais juste partager quelque chose ...

Les éléments de texte partiellement soulignés peuvent facilement être obtenus en utilisant display:tableoudisplay:inline-block

(Je ne l'utilise tout simplement pas display:inline-blockparce que, oui vous savez, l' 4pxécart gênant ).

Éléments textuels

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
Développer l'extrait

Le centrage , display:tableil est impossible de centrer l'élément avec text-align:center.
Travaillons avec margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Développer l'extrait

Eh bien , c'est bien, mais ce n'est pas partiellement .
Comme le bookcasey l'a déjà introduit, les pseudo-éléments valent de l'or.

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
Développer l'extrait

Décalé , le soulignement est aligné à gauche maintenant. Pour le centrer, il suffit de pousser le pseudo-élément de la moitié de son width( 50% / 2 = 25%) vers la droite.

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  margin-left: 25%;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
Développer l'extrait

... comme l' a commenté davidmatas , l'utilisation margin:autoest parfois plus pratique que le calcul du margindécalage à la main.

Ainsi, nous pouvons aligner le soulignement à gauche, à droite ou au centre (sans connaître le courant width) en utilisant l'une de ces combinaisons:

  • Gauche : margin-right: auto (ou laissez-le simplement)
  • Milieu :margin: auto
  • À droite :margin-left: auto

Exemple complet

.underline {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.underline:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

.underline--left:after {
  margin-right: auto; /* ...or just leave it off */
}

.underline--center:after {
  margin-left: auto;
  margin-right: auto;
}

.underline--right:after {
  margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>
Développer l'extrait

Éléments de niveau bloc

Cela peut être facilement adopté, afin que nous puissions utiliser des éléments de niveau bloc. L'astuce consiste à régler la hauteur des pseudo-éléments à la même hauteur que son élément réel (simplement height:100%):

div {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
div:after {
  border-bottom: 3px solid #666;
  content: '';
  display: block;
  height: 100%;
  width: 60px;
}
<div></div>
Développer l'extrait

yckart
la source
2
Très bonne réponse. Pour le :afterJ'aime plus une margin: 0 autoapproche au lieu du margin-left: 25%parce qu'il fonctionnera avec n'importe quelle largeur que vous déclarez sans avoir besoin de faire des maths.
davidmatas
1
@davidmatas Bon point! Je viens d'utiliser la méthode mathématique pour clarifier comment le positionner manuellement à la main. Avec cet exemple, n'importe qui pourrait comprendre comment l'aligner à gauche / centre / droite. Quoi qu'il en soit, j'ajouterai le auto- simplificator :)
yckart
16

Voici une autre solution qui repose sur l' linear-gradientendroit où vous pouvez facilement créer tout type de ligne que vous souhaitez. Vous pouvez également avoir plusieurs lignes (de chaque côté par exemple) en utilisant plusieurs arrière-plans:

Afficher l'extrait de code

Voici une autre syntaxe pour obtenir la même syntaxe que ci-dessus:

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(#000, #000) top /40% 3px no-repeat, 
   #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(red,red) bottom/ 60% 2px no-repeat, 
    #ccc;
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(red , red)bottom left/ 60% 2px,
   linear-gradient(blue, blue) 60% 0 / 40% 2px,
   linear-gradient(brown, brown) left/ 3px 30%,
   linear-gradient(orange, orange) right / 3px 40%,
   #ccc;
  background-repeat:no-repeat;
}
<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>
Développer l'extrait

Temani Afif
la source
1
Wow ... J'ai tripoté pendant des heures pour trouver un moyen d'afficher uniquement le coin supérieur gauche et supérieur droit d'une boîte "implicite". : avant et: après était trop limité, cela a gâché le positionnement de l'objet. C'est une solution géniale!
Wouter
Quelques informations générales sur pourquoi et comment cela fonctionne: webfx.com/blog/web-design/background-css-shorthand
Wouter
2

J'ai utilisé une grille pour dessiner certaines des frontières.

Regardez ici .

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>
des sites
la source
@ SverriM.Olsen puisque la personne a édité le code, le commentaire est obsolète
Sagar V
0

CSS ne prend pas en charge les bordures partielles. Vous auriez besoin d'utiliser un élément adjacent pour simuler cela.

Diodeus - James MacFarlane
la source
Ou un pseudo-élément, que vous pouvez faire entièrement avec CSS et ne pas ajouter de balisage, comme illustré par les réponses ci
OG Sean