Re: Pointer Events Question

[Mottie]

Hi msguerra74!

I guess you could overlay the outside of the arc with elements that revert the cursor back to an arrow. It’s not pretty, [but it works](http://codepen.io/Mottie/pen/iajtI). And you can always add more divs to block off more of the arc.

• How
• Are
• You

CSS

body {
font-family: arial;
}
header {
background: #ccc;
height: 150px;
margin: 50px auto;
position: relative;
text-align: center;
width: 700px;
}
nav {
left: 0;
position: absolute;
right: 0;
top: -30px;
}
ul {
border-radius: 0 0 200px 200px;
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
}
li {
background: green;
display: inline-block;
text-align: center;
width: 100px;
}
a {
color: #fff;
display: block;
padding: 5px 0 125px 0;
text-decoration: none;
}
li:hover {
background: blue;
}

div.blocker {
width: 50px;
height: 150px;
/* border: #999 1px solid; */
position: absolute;
top: 20px;
cursor: arrow;
}
div.left {
transform: rotate(-35deg);
left: 170px;
}
div.right {
transform: rotate(35deg);
left: 478px;
}

Note: I turned on prefix free for that demo.