Qualquer maneira de limitar o comprimento da fronteira?

Existe alguma maneira de limitar o comprimento de uma borda. Eu tenho um

que tem uma borda inferior, mas eu quero adicionar uma borda à esquerda do

que só se estende a metade do caminho.

Existe alguma maneira de fazer isso sem adicionar elementos extras na página?

Espero que isto ajude:

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

O conteúdo gerado por CSS pode resolver isso para você:

 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 – o content: ""; declaração é necessária para que o pseudo-elemento seja renderizado)

O :after pedras 🙂

Se você tocar um pouco, você pode até definir o elemento de borda redimensionada para aparecer centralizado ou para aparecer somente se houver outro elemento próximo a ele (como nos menus). Aqui está um exemplo com um 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; } 
  

para linhas horizontais, você pode usar a tag hr:

 hr { width: 90%; } 

mas não é possível limitar a altura da borda. apenas altura do elemento.

Com as propriedades CSS, só podemos controlar a espessura da borda; não comprimento.

No entanto, podemos imitar o efeito de borda e controlar sua width e height como desejamos de outras maneiras.

Com CSS (Gradiente Linear):

Podemos usar linear-gradient() para criar uma imagem de fundo e controlar seu tamanho e posição com CSS para que pareça uma borda. Como podemos aplicar várias imagens de fundo a um elemento, podemos usar esse recurso para criar várias imagens semelhantes a bordas e aplicar em lados diferentes do elemento. Também podemos cobrir a área disponível restante com alguma cor sólida, gradiente ou imagem de fundo.

HTML necessário:

Tudo o que precisamos é apenas um elemento (possivelmente tendo alguma class).

 

Passos:

  1. Crie imagens de fundo com linear-gradient() .
  2. Use o background-size para ajustar a width / height da (s) imagem (ns) criada (s) acima para que pareça uma borda.
  3. Use background-position para ajustar a posição (como left , right , left bottom , etc.) da (s) borda (s) criada (s) acima.

CSS necessário:

 .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 ie 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; } 

Exemplos:

Com linear-gradient() podemos criar bordas de cor sólida, bem como ter gradientes. Abaixo estão alguns exemplos de borda criados com este método.

Exemplo com borda aplicada apenas em um lado:

 .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); } 
 

As bordas são definidas apenas por lado, não em frações de um lado. Então, não, você não pode fazer isso.

Além disso, um novo elemento também não seria uma borda, apenas imitaria o comportamento desejado – mas ainda assim seria um elemento.

Este é um truque de CSS, não uma solução formal. Deixo o código com o período preto porque me ajuda a posicionar o elemento. Depois, colora seu conteúdo (cor: branco) e (margem superior: -5px ou mais) para torná-lo como se o período não estivesse lá.

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

Outra solução é que você poderia usar uma imagem de fundo para imitar a aparência de uma borda esquerda

  1. Crie o estilo de borda esquerda que você precisa como gráfico
  2. Posicione-o à esquerda de seu div (torne-o longo o suficiente para lidar com aproximadamente dois aumentos de tamanho de texto para navegadores mais antigos)
  3. Defina a posição vertical de 50% a partir do topo da sua div.

Você pode precisar ajustar para o IE (como de costume), mas vale a pena um tiro, se esse é o design que você está indo para.

  • Eu geralmente sou contra o uso de imagens para algo que o CSS inerentemente fornece, mas às vezes, se o design precisar, não há outra maneira de contornar isso.

Outra maneira de fazer isso é usar a imagem de borda em combinação com um gradiente linear.

 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; } 
 

Você pode definir apenas uma borda por lado. Você teria que adicionar um elemento extra para isso!