2
Hi, I need to make a trapeze, like this:
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?
– celsomtrindade
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.
– Tiago P.C
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.– Chun
It is not "incorrect" to use images instead of styling shapes?
– Tiago P.C
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.
– celsomtrindade
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 ofposition: absolute
, todiv.conteudo
takes the same form asdiv.trapezio
and has no style that "gives shape" the same... while the Trapezio is designed bydiv.esquerda
,div.direita
anddiv.centro
, but these have no content and are behind thediv.conteudo
.– Tobias Mesquita