Existe alguma maneira de declarar um tamanho / borda parcial para uma caixa?

101

Qualquer maneira de declarar um tamanho / borda parcial para uma caixa no CSS? Por exemplo, uma caixa com 350pxisso mostra apenas uma borda inferior em seus primeiros 60px. Acho que isso pode ser muito útil.

Exemplos:

insira a descrição da imagem aqui

css border

— davidmatas
fonte

152

Na verdade não. Mas é muito fácil conseguir o efeito de uma forma que degrada elegantemente e não requer marcação supérflua:

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 trecho

— estante de livros
fonte

3

Nada como ser marcado como a resposta certa sem marcar com +1. Mas eu marquei você com +1! Esta foi uma solução perfeita para o meu problema. Obrigado! editar Acho que você poderia ter sido + 1 seria OP e -1 por outra pessoa. Ah bem. Agradeço sua resposta, e isso é tudo que importa, certo ;-)

— CWSpear

7

Como você consegue que isso fique no centro, como em seu segundo exemplo?

— Cameron Martin de

Devo acrescentar, quando o elemento pai é um elemento de bloco embutido de largura de fluido. Obviamente, quando é de largura fixa, é fácil.

— Cameron Martin

4

Esqueça, consegui o efeito que queria - dabblet.com/gist/e5a78f2d4bf50b6be4d3 . É uma vergonha os ::outsidee ::insidepseudo-elementos ainda não estão disponíveis, eu odeio colocar na marcação apenas para denominar, mas eu não acho que haja qualquer outra maneira.

— Cameron Martin

Isso funciona! Para usá-lo com o React, você não pode usar contentem :afterum estilo embutido ou JSS, mas funciona bem com componentes estilizados.

— Raphael Pinel

23

Eu sei, isso já está resolvido e os pixels foram solicitados. No entanto, eu só queria compartilhar algo ...

Elementos de texto parcialmente sublinhados podem ser facilmente obtidos usando display:tableoudisplay:inline-block

^{(Eu só não uso display:inline-blockporque, sim, você sabe, o estranho 4px-gap).}

Elementos Textuais

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}

<h1>Foo is not equal to bar</h1>

Expandir trecho

Centrar , display:tabletorna impossível para centralizar o elemento com text-align:center.
Vamos trabalhar com 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 trecho

Bem , isso é bom, mas não é parcialmente .
Como estante de livros já apresentado, pseudo-elementos valem ouro.

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 trecho

Offset , o sublinhado é alinhado à esquerda agora. Para centralizá-lo, basta empurrar o pseudoelemento metade de seu width( 50% / 2 = 25%) para a direita.

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 trecho

...Como comentou davidmatas , usar margin:autoàs vezes é mais prático do que calcular omargin deslocamento à mão.

Assim, podemos alinhar o sublinhado à esquerda, direita ou centro (sem saber a corrente width) usando uma destas combinações:

Esquerda : margin-right: auto _{(ou apenas deixe desligado)}
Meio :margin: auto
Certo :margin-left: auto

Exemplo 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 trecho

Elementos de nível de bloco

Isso pode ser facilmente adotado, para que possamos usar elementos de nível de bloco. O truque é definir a altura dos pseudoelementos para a mesma altura de seu elemento real (simplesmente 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 trecho

— Yckart
fonte

2

Ótima resposta. Para :aftereu gosto mais de uma margin: 0 autoabordagem ao invés do margin-left: 25%porque funcionará com qualquer largura que você declarar sem a necessidade de fazer contas.

— davidmatas

1

@davidmatas Bom argumento! Acabei de usar o método matemático para esclarecer como posicioná-lo manualmente. Com este exemplo, qualquer pessoa poderia entender como alinhá-lo à esquerda / centro / direita. De qualquer forma, adicionarei o auto- simplificator :)

— yckart de

15

Aqui está outra solução que depende de linear-gradientonde você pode criar facilmente qualquer tipo de linha que desejar. Você também pode ter várias linhas (em cada lado, por exemplo) usando vários planos de fundo:

Exibir trecho de código

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

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

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
    linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
    linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
  #ccc
}

<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>

Expandir trecho

Aqui está outra sintaxe para obter o mesmo que acima:

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

— Temani Afif
fonte

1

Uau ... Eu tenho mexido por horas para encontrar uma maneira de mostrar apenas o canto superior esquerdo e superior direito de uma caixa "implícita". : antes e: depois era muito limitado, atrapalhou o posicionamento do objeto. Esta é uma solução brilhante!

— Wouter

Algumas informações básicas sobre por que e como isso funciona: webfx.com/blog/web-design/background-css-shorthand

— Wouter

2

Usei uma grade para construir e desenhar algumas das fronteiras.

Veja aqui .

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>

— sites
fonte

@ SverriM.Olsen uma vez que a pessoa editou o código, o comentário é obsoleto

— Sagar V

0

CSS não oferece suporte a bordas parciais. Você precisaria usar um elemento adjacente para simular isso.

— Diodeus - James MacFarlane
fonte

Ou um pseudo-elemento, que você pode fazer inteiramente com CSS e não adicionar nenhuma marcação, conforme ilustrado pelas respostas acima

— OG Sean