dúvida resolvida COMO FAZ UM "INSIDE" BORDER-RADIUS

[Luiiiz]

Eu estava navegando pelo Dribbble onde pude encontrar um site bastante botinho. No menu desse site usava uma espécie de border-radius  "para o outro lado" e eu estou virando a cabeça para saber como fazer isso. Eu cheguei a procurar sites que usam algo semelhante para estudar o código fonte, procurei em outros sites como codepen. Nada. Enfim, peço a ajuda de vocês. Se souberem o nome disso, souberem que utiliza usando somente HTML/CSS ou puder me enviar um exemplo, agradeceria:

https://prnt.sc/q0zw3c

Editado Novembro 23, 2019 por Luiiiz
Erro na palavra "HTML"

[Dery]

Cara, consegui isso, mas ficou com problemas de sobreposição

https://pastebin.com/cjZ8PJDB

https://i.imgur.com/ohbraiK.png

[zMath]

Ele usa só HTML e CSS sim, mas isso parece ser feito com pseudo elementos, com background na cor do elemento da direita. Parece ser algo complicado de replicar mas depois vou ver se consigo aqui.

[Luiiiz]

1 hora atrás, zMath disse:

Ele usa só HTML e CSS sim, mas isso parece ser feito com pseudo elementos, com background na cor do elemento da direita. Parece ser algo complicado de replicar mas depois vou ver se consigo aqui.

imaginei que seria com pseudo-ele elementos, mas como aplicar duas cores distintas, uma com a borda arredondada e a outra não?

[zMath]

Na verdade é como se ele tivesse desenhando um SVG na tela, deixando uma camada entre o texto e a div de background. Ele não aplica bordas com cores diferentes, a unica borda é a do cinza, o branco só está sobreposto por ele.

[Luiiiz]

Se conseguir fazer, manda para mim o código. Ficaria bem mais fácil de entender. Aliás, se quiser o link do post no Dribbble

 

[zMath]

Manda ai o link que vou dar uma olhada dps

[Luiiiz]

Está aqui: https://dribbble.com/shots/8296082-Dashboard-User-Interface

Aqui está outro exemplo: https://dribbble.com/shots/7523595-Task-Management-App-Concept

[Luiiiz]

#up

[Luiiiz]

#up

[Luiiiz]

Eu consegui fazer com o item sucessor. O item  antecessor ainda estou na luta ...

https://codepen.io/Luiiiiz/pen/bGGPXyO

[Luiiiz]

19 horas atrás, Dery disse:

Cara, consegui isso, mas ficou com problemas de sobreposição

https://pastebin.com/cjZ8PJDB

https://i.imgur.com/ohbraiK.png

Consegui entender e achei bastante criativo. Acho que com z-index terá como resolver o problema de exposição. Agradeço pela resposta

Editado Novembro 28, 2019 por Luiiiz

[Dery]

47 minutos atrás, Luiiiz disse:

Consegui entender e achei bastante criativo. Acho que com z-index terá como resolver o problema de exposição. Agradeço pela resposta

Tentei usar z-index, mas não obtive sucesso. Se você conseguir, está pronto ?

[Luiiiz]

6 horas atrás, Dery disse:

Tentei usar z-index, mas não obtive sucesso. Se você conseguir, está pronto ?

Aqui, usei da sua técnica pra fazer. Deu isso: https://codepen.io/Luiiiiz/pen/qBBeQoL

[Luiiiz]

Pode fechar o tópico

[Faall1n]

Sua dúvida foi marcada como resolvida pela nossa equipe. Caso sua dúvida não tenha sido sanada, crie outro tópico.

OBS: Essa mensagem é automática.