There are many different approaches you can take if you prefer the look and feel of the example code. While you don’t have to make it look the same as the original game, I think it’s good practice exactly because of the problem that you are having.
You can actually achieve the style of the example code with only five
Below a hint—play around with the values for
border-radius until you are happy with it (given your current code I assume that you will have no issues understanding it):
<!-- HTML -->
/* CSS */
border-left: 10px solid royalBlue;
border-bottom: 10px solid royalBlue;
border-top: 20px solid royalBlue;
border-right: 20px solid royalBlue;
border-radius: 0 100% 0 0;
I hope that helps! Good luck.
*If I’m not mistaken you can get the layout with only 2
<div>'s with pseudoelements, but it’s impractical in this case because you actually need four clickable areas.