¿Alguna forma de declarar un tamaño / borde parcial a una caja?

101

¿Alguna forma de declarar un tamaño / borde parcial a un cuadro en CSS? Por ejemplo, un cuadro con 350pxeso solo muestra un borde inferior en sus primeros pasos 60px. Creo que puede resultar muy útil.

Ejemplos:

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

css border Davidmatas
fuente

Respuestas:

152

Realmente no. Pero es muy fácil lograr el efecto de una manera que se degrada con gracia y no requiere un marcado superfluo:

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>
Expandir fragmento

bookcasey
fuente
3
No hay nada como ser marcado como la respuesta correcta sin hacer +1. ¡Pero te hice +1! Esta fue una solución perfecta para mi problema. ¡Gracias! editar Supongo que podrías haber sido +1 en OP y -1 por otra persona. Oh bien. Aprecio tu respuesta, y eso es todo lo que importa, verdad ;-)
CWSpear
7
¿Cómo logras que esto esté en el centro, como en su segundo ejemplo?
Cameron Martin
Debo agregar, cuando el elemento padre es un elemento de bloque en línea de ancho fluido. Obviamente, cuando tiene un ancho fijo, es fácil.
Cameron Martin
4
No importa , obtuve el efecto que quería: dabblet.com/gist/e5a78f2d4bf50b6be4d3 . Es una pena que las ::outsidey ::insidelos pseudo-elementos no están disponibles todavía, me gusta poner en el marcado sólo por el estilo, pero creo que no hay ninguna otra manera.
Cameron Martin
¡Esto funciona! Para usarlo con React, no puede usarlo como estilo contenten :afterlínea o JSS, pero funciona bien usando componentes con estilo.
Raphael Pinel
23

Lo sé, esto ya está resuelto y se solicitaron píxeles. Sin embargo, solo quería compartir algo ...

Los elementos de texto parcialmente subrayados se pueden lograr fácilmente utilizando display:tableodisplay:inline-block

(Simplemente no uso display:inline-blockporque, sí, ya sabes, el incómodo 4pxespacio).

Elementos textuales

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
Expandir fragmento

Centrado , display:tablehace imposible centrar el elemento con text-align:center.
Trabajemos con margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Expandir fragmento

Bueno , eso es bueno, pero no parcialmente .
Como bookcasey ya se introdujo, pseudo-elementos valen oro.

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>
Expandir fragmento

Desplazamiento , el subrayado está alineado a la izquierda ahora. Para centrarlo, simplemente empuje el pseudoelemento la mitad de su width( 50% / 2 = 25%) hacia la derecha.

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>
Expandir fragmento

... como comentó Davidmatas , usar margin:autoes a veces más práctico que calcular el margin-desplazamiento a mano.

Entonces, podemos alinear el subrayado a la izquierda, a la derecha o al centro (sin conocer la corriente width) usando una de estas combinaciones:

  • Izquierda : margin-right: auto (o simplemente déjelo apagado)
  • Medio :margin: auto
  • Derecha :margin-left: auto

Ejemplo completo

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

Elementos a nivel de bloque

Esto se puede adoptar fácilmente, de modo que podamos usar elementos a nivel de bloque. El truco consiste en establecer la altura de los pseudoelementos a la misma altura que su elemento real (simplemente 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>
Expandir fragmento

yckart
fuente
2
Gran respuesta. En cambio, :afterme gusta más un margin: 0 autoenfoque margin-left: 25%porque funcionará con cualquier ancho que declare sin necesidad de hacer matemáticas.
Davidmatas
1
@davidmatas ¡Buen punto! Acabo de usar la forma matemática para aclarar cómo colocarlo manualmente a mano. Con este ejemplo, cualquiera podría entender cómo alinearlo a la izquierda / centro / derecha. De todos modos, auto
agregaré
15

Aquí hay otra solución en la linear-gradientque puede crear fácilmente cualquier tipo de línea que desee. También puede tener varias líneas (en cada lado, por ejemplo) utilizando varios fondos:

Mostrar fragmento de código

Aquí hay otra sintaxis para lograr lo mismo que el anterior:

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

Temani Afif
fuente
1
Vaya ... He estado jugando durante horas para encontrar una manera de mostrar solo la esquina superior izquierda y la esquina superior derecha de un cuadro "implícito". : antes y: después era demasiado limitado, estropeaba la posición del objeto. ¡Esta es una solución brillante!
Wouter
Algunos antecedentes sobre por qué y cómo funciona esto: webfx.com/blog/web-design/background-css-shorthand
Wouter
2

Usé una cuadrícula para construir y dibujar algunos de los bordes.

Vea aquí .

Código:

<!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>
sitios
fuente
@ SverriM.Olsen desde que la persona editó el código, el comentario es obsoleto
Sagar V
0

CSS no admite bordes parciales. Necesitaría usar un elemento adyacente para simular esto.

Diodeus - James MacFarlane
fuente
O un pseudoelemento, que puede hacer completamente con CSS y no agregar ningún marcado, como lo ilustran las respuestas anteriores
OG Sean