Sim, para fazer um triângulo o SVG seria uma coisa de nada. Até acho que é mais elegante, porque usar borders, ainda que seja uma técnica usada, parece-me um bocado um hack.
[Dúvida] CSS triangle css border
- Autor do tópico pedropcruz
- Data Início
Sim, para fazer um triângulo o SVG seria uma coisa de nada. Até acho que é mais elegante, porque usar borders, ainda que seja uma técnica usada, parece-me um bocado um hack.
pedropcruz
Power Member
Bem desculpa a minha ignorância, o que queres dizer com o "hack" ?
Eu só estou a ver todas as possibilidades, atenção! Entre um SVG e um :after de um elemento, o que tem melhor perfomance/fica melhor? É assim que estoua pensar de momento.
Mas vamos ver
é apenas um desafio!
Nada
Power Member
Com uma imagem já ta visto que é possivel..
O que ele quer é não usar essa opção, e ir para outra opção.
A minha dificuldade é apenas saber a posição dele relativamente ao scroll do meio, tudo o resto ta a funcionar bem.. Espero estar a chegar a resolução da cena, e não andar a dar voltas lol
O que ele quer é não usar essa opção, e ir para outra opção.
A minha dificuldade é apenas saber a posição dele relativamente ao scroll do meio, tudo o resto ta a funcionar bem.. Espero estar a chegar a resolução da cena, e não andar a dar voltas lol
Disse hack como uma coisa pouco elegante, martelada para ter uma funcionalidade que não a pretendida.
Não sei como estás a fazer o triângulo, por isso não sei se se aplica ao teu método. Para mim um hack seria usar um div vazio, com três borders transparentes e um colorido para fazer a "seta" (essa é a técnica que tenho visto). Funciona, mas semanticamente não é uma seta ou um triângulo, é apenas um div muito estranho.
pedropcruz
Power Member
É por essa via que não estou a ir basicamente.
Daí usar os pseudo-elementos :after
@Nada a posição da scrollbar simplesmente não tem. Mas interessa saber isso e aplicar o mesmo?
Abraço e Obrigado
Ok, mas o que é pões no :after para fazer os triângulos?
Cunha Esteves
What is folding?
Um after ou uma div vao ter exactamente o mesmo comportamento na maioria dos casos.É por essa via que não estou a ir basicamente.
Daí usar os pseudo-elementos :after
@Nada a posição da scrollbar simplesmente não tem. Mas interessa saber isso e aplicar o mesmo?
Abraço e Obrigado
Quanto ao problema acho que nao e possivel so com css estando as coisas como estao, isto porque qualquer elemento que faça scroll com a li vai ficar por detraz da scrollbar.
pedropcruz
Power Member
Como referi anteriormente:
Código:
&:before{
content: '';
position: absolute;
right: -1px;
margin-top: 10px;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid $base-white;
z-index: 10;
@include transition(all .2s linear);
}@Cunha Esteves na prática parece que o comportamente é mesmo esse. E não existe a possibilidade de sobrepor? Por essa questão também, mantive a posição absolute.
Obrigado!
@pedropcruz Ok, não tinha visto, mas então essa é exatamente a técnica que eu descrevi. Não é tão mau como ter um elemento específico, mas continuo a considerar um hack (porque não é uma border, está a funcionar como uma seta).
Já agora, tinha sugerido uma coisa parecida antes, mas e se usasses o ::after do elemento da tabela em vez do ::before da coluna da direita? Assim de certeza que não saía do sítio. Mas a scrollbar ficava no meio, a não ser que a passasses para a esquerda.
Já agora, tinha sugerido uma coisa parecida antes, mas e se usasses o ::after do elemento da tabela em vez do ::before da coluna da direita? Assim de certeza que não saía do sítio. Mas a scrollbar ficava no meio, a não ser que a passasses para a esquerda.
pedropcruz
Power Member
Agora sim, conseguis-te baralhar-me todo! xD
Não sei se faz sentido e se é possível funcionar da maneira que estás a fazer, a ideia era que a seta ficasse no td da tabela, em vez de ficar na coluna da direita. Mas aí a scrollbar tinha de passar para a esquerda, se não interrompia a seta.
pedropcruz
Power Member
Mas não á td's em lado nenhum... Isto é uma UL com li's dentro ... Vou explicar pondo o html:
Código:
<div class="EuTenhoAAltura" style="height:200px; overflow-y:auto;">
<ul class="EuSouALista">
<li class="naoActivo"></li>
<li class="naoActivo"></li>
<li class="naoActivo"></li>
<li class="naoActivo"></li>
<li class="activo"></li>
<li class="naoActivo"></li>
<li class="naoActivo"></li>
<li class="naoActivo"></li>
<li class="naoActivo"></li>
</ul>
</div>Ou seja, ao fazer scroll, a seta tem que está no LI, correto? Sei porque não vai até, é pela position:absolute... Até aí, descobri, mas se puser relative o scroll da div fica á frente da UL, ou seja, a seta fica por baixo do scroll... Entendes?
pedropcruz
Power Member
Mas o resultado é o mesmo... infelizmente.
Oh well, tenho de ver a melhor opção.
Obrigado!
mags
Power Member
vamos lá por partes.
o problema aqui é a scroll bar personalizada que está a afetar o esquema?
sem scroll bar personalizada o esquema seria este https://jsfiddle.net/o07wmz0w/
é isto que tens? retirei o -1px right só para não criar scroll horizontal.
caso seja a scroll bar, é adicionar o script para testar
é algo disto? http://manos.malihu.gr/jquery-custom-content-scroller/
o problema aqui é a scroll bar personalizada que está a afetar o esquema?
sem scroll bar personalizada o esquema seria este https://jsfiddle.net/o07wmz0w/
é isto que tens? retirei o -1px right só para não criar scroll horizontal.
caso seja a scroll bar, é adicionar o script para testar
é algo disto? http://manos.malihu.gr/jquery-custom-content-scroller/
Última edição:
pedropcruz
Power Member
....
Ora lê desde o inicio do tópico por favor...
Isso foi um exemplo que dei ao @nfk, para lhe explicar que isto não era nenhuma table, mas sim ul li's, entendes?
Por partes então:
Faço o meu UL:
A Barrinha preta, é o scroll, ok? Ora quando carrego num dos LI's, acontece isto: (sim não comecem a carregar como não houvesse amanhã, tem bug)
Pronto, neste momento apenas cliquei. Quando faço scroll acontece isto:
Ou seja, a seta está exatamente no mesmo sitio, o que não é suposto!
E vocês dizem: Põe relative! E eu respondo assim:
E o ::after tem o mesmo comportamento!
Obrigado a todos!
Abraço!
Tens a certeza de que acontece o mesmo no ::after, da maneira que o @mags sugeriu? Era isso que eu tinha pensado quando disse que podias associar a seta ao elemento li em vez de estar na coluna da direita. Se a seta está no li, como é que vai para outro elemento se fizeres scroll? Em princípio ficaria sempre no li que tem classe "active".
pedropcruz
Power Member
Sim, é a mesma coisa:
Até piorou, e não consigo entender... a altura do LI foi-se lol
pedropcruz
Power Member
Meus caros, vou partilhar uma possível solução:
http://jsbin.com/woyasibani/edit?output
Basicamente o que foi feito? bem, visto que estou usar o bs para o projeto, o que fiz foi, a section do meio (caso não tenham percebido, isto está divido em 3 a ideia da página lol) foi tirar o padding á direita, e desaparecer com o scroll...
E fazer o que muitos disseram, e que para mim fazia todo o sentido também. LI a relative, e o ::after com absolute e a sua devida posição.
Foi mesmo um grande desafio, mas consegui chegar lá!
EDIT: Descobri uma solução melhor, sem ter que desaparecer com o scroll!
Alguém conhece estes atributos?
Numa simples pesquisa que fiz: http://jsfiddle.net/jw3jsz08/1/ eu vi isso e apliquei no meu, fazendo claro uma outra div á volta do UL. E pronto tenho tudo á mostra, e a scrollbar á esquerda! E não fica mal de todo
há sou muita teimoso!
Obrigado a todos @mags @nfk @Nada @Cunha Esteves @pmpv !
Abraço & GoodCode!
http://jsbin.com/woyasibani/edit?output
Basicamente o que foi feito? bem, visto que estou usar o bs para o projeto, o que fiz foi, a section do meio (caso não tenham percebido, isto está divido em 3 a ideia da página lol) foi tirar o padding á direita, e desaparecer com o scroll...
E fazer o que muitos disseram, e que para mim fazia todo o sentido também. LI a relative, e o ::after com absolute e a sua devida posição.
Foi mesmo um grande desafio, mas consegui chegar lá!
EDIT: Descobri uma solução melhor, sem ter que desaparecer com o scroll!
Alguém conhece estes atributos?
Código:
direction: rlt; //or ltrNuma simples pesquisa que fiz: http://jsfiddle.net/jw3jsz08/1/ eu vi isso e apliquei no meu, fazendo claro uma outra div á volta do UL. E pronto tenho tudo á mostra, e a scrollbar á esquerda! E não fica mal de todo
há sou muita teimoso!
Obrigado a todos @mags @nfk @Nada @Cunha Esteves @pmpv !
Abraço & GoodCode!
Última edição: