0

I'm working on updating a site that currently has four boxes that act as buttons in a row; except they're using a image map to do it. I'd like to transform it to a CSS solution so it's not so much of a drain and is more accessible friendly. How can something like this be done? I know it's possible to do it vertically but horizontally....

Here is a artist rendition of how it looks now. The sizes aren't exact but you get the diagonal idea...

enter image description here

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
sylargaf
  • 346
  • 1
  • 6
  • 19
  • 1
    It would be great if you could provide HTML of these buttons as well as any CSS you've come up with so far (like the colors at the least). Some indication of what research you've done would also not be remiss. – Heretic Monkey Apr 22 '21 at 14:54
  • It's a imagemap, so its just one image and one html container with being used to dictacte links. – sylargaf Apr 22 '21 at 14:56
  • "I'd like to transform it to a CSS solution" What does that mean? CSS acting on the same HTML as you have now? – Heretic Monkey Apr 22 '21 at 14:58

1 Answers1

1

The easiest way would be to use:

transform: skew(-30deg);

For the inner rectangles, and for the outer just combine one normal rectangle and one that has skew.

munleashed
  • 1,677
  • 1
  • 3
  • 9