CSS Div que cresce em diferentes partes.

Luis Cloud Campos · 15 de outubro de 2020

Gostaria de saber se é possível fazer com que um div de (height 500px) possa ter uma (width: 500px) a partir dos últimos 50px do width. Basicamente eu quero que a div cresça para cima, depois eu quero que só a pontinha dela cresça para os lados, ao invés da div formar um quadrado, quero que ela forme um T. E sim, eu sei que é mais fácil fazer com duas divs, mas eu gostaria de saber se da pra fazer com uma só, é possível apenas com css?

DiF · 16 de outubro de 2020

@Luis Cloud Campos Pelo que entendi, não tem como fazer isso com apenas um elemento e com CSS.

Talvez seja possível, se usar javascript e canvas. Mas não vou garantir que consiga fazer isso também.

O mais certo é se quiser fazer um efeito " T " use dois elementos div

washalbano · 16 de outubro de 2020

Dá pra resolver de algumas maneiras.

Depende de pra q seria esse T?
Se teria algum "conteúdo"

https://codepen.io/washalbano/pen/vYKGppZ

DiF · 16 de outubro de 2020

@washalbano Interessante sua solução. Mais uma coisa aprendida hj.

Mas ele é estático certo? Não permite que o conteúdo supere a altura do "traço " do T. Mas é realmente surpreendente. Fiz umas pesquisas e nenhuma delas retornou este tipo de solução.

Parabéns.

Luis Cloud Campos · 17 de outubro de 2020

@washalbano Seria pra fazer animação com HOVER. Eu sou iniciante e sei que com JavaScript fica mais fácil de fazer coisas assim. Porém eu estou tentando fazer com CSS pra ver se vai funcionar. O objetivo seria pegar uma DIV comum, e durante o HOVER, fazer ela ter uma forma diferente, o T foi um dos exemplos. Eu tentei usar uma propriedade do HOVER que anima duas DIVS ao mesmo tempo, porém não consegui usar essa propriedade em mais de duas DIVS, que é: (.div1:hover + .div2). Eu tentei usar: (.div1:hover + .div2 + .div3) porém ele ignora o elemento do meio.