Trapezoid with CSS or JS

Asked

Viewed 52 times

2

Hi, I need to make a trapeze, like this:

inserir a descrição da imagem aqui

Be done with CSS or JS. But it can’t be done with Borders, so it doesn’t work well if I need to put some text inside, I can’t use any Absolute position or something like that, because it’s a menu with different shapes, so I can’t compromise the other elements. I’m waiting for help.

  • You tried the solution I proposed in the other question?

  • Yes @Celsomtrindade, and would work the way I need, but as you said there will be difficult maintenance and handling after, which I unfortunately can not do.

  • 1

    This question seems to have an answer here: Use links in geometric shapes. Another solution would be to use ready-made images with the desired shape and use them as background-image. This way you can work better on your responsiveness.

  • It is not "incorrect" to use images instead of styling shapes?

  • Not always. It all depends on your need and ability to generate the content. In your case, you have very complex constraints and need to get the result. The image can be a simple solution, but with a counter-start to increase the load time. Already using the edges, you have the negative side of restricting the alignment. And so on.

  • I see no reason to ban position: absolute, maybe you just haven’t been thinking about how to use it so as to meet your needs, take for example this Jsfiddle... despite the use of position: absolute, to div.conteudo takes the same form as div.trapezio and has no style that "gives shape" the same... while the Trapezio is designed by div.esquerda, div.direita and div.centro, but these have no content and are behind the div.conteudo.

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.