Html Question posted in
Some basic documentation can be found here.

Html – How to create a weirdly shaped div?

Recently I’ve been trying to code a World’s Hardest Game kind of game in javascript, html and css. I’m stuck on creating a playing area like the one shown on the picture. Is it possible to create a div like the one on the image below? And if it’s not possible with div or there is an easier way to achieve a shape like this, how do I do it?
(https://phpout.com/wp-content/uploads/2024/04/AQYPs.png)

I tried to do it with several divs but the borders of them made it ugly and I wanted to achieve a somewhat nice look.

Tags:

2

Answers


  1. 0

    I would go for an SVG element. Individual SVG elements can listen to mouseenter and mouseleave events.

    Make a little experiment first to check whether the mouse enter/leave events are detected in relation to the bounding box, or in relation to the exact shape. If it’s not the case, then you would be better off using canvas and detecting based on mouse coordinates on each frame.

    Login or Signup to reply.
  2. 0

    You can do what you did with the divs but you can get rid of some of the borders shown using border-left: none;, border-right: none;, border-top: none; etc…

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search