clip-path css span/div declaration blocking popup. Why? Alternatives?

I've got a nice looking angled cut on a &lt;span&gt; here (which could just as easily be a &lt;div&gt; if that'd work better).&nbsp; This is achieved by this css decleration: clip-path: polygon(calc(100% - 0px) 0, 100% 10px, 100% 100%, 11px 100%, 0 calc(100% - 10px), 0 0); In context, here's what it is applied to... I've been adding popup explainers to the sheet via the &lt;a&gt; method listed here.&nbsp; <a href="https://wiki.roll20.net/Character_Sheet_Enhancement#Popup" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Enhancement#Popup</a> However, as long as that clip-path styling remains in place, the popup and overlay gets blocked, restricting it to, well, the clipped path area. Like so. If I uncheck the clip-path declaration in the 'inspect' view on Chrome, the popup shows up as normal. I've tried applying clip-path: none; to all of the divs and classes involved in the popup, such as the overlay, box, &nbsp;and&nbsp; popup class, really anything and everything, but it doesn't change anything. So my questions are... Why does this happen? I'm not sure I fully understand what clip-path does, and why it applies to all additional elements inside the same div/span? Is there a styling alternative to clip-path that will get me the same bottom corner cut angle results? Is there a solution here that I'm missing? So that I can continue to use clip-path (which I'm quite happy with visually). Any help would be appreciated. Thanks! Here's a sample of a chunk of html with the popup inside it, if that helps &lt;div class="skillsfillrepeating"&gt; &lt;!-- class is a misnomer leftover from before --&gt; &lt;span class="skillnamefieldprimary" name="attr_allcombat"&gt; &lt;div class="box"&gt; &lt;a class="button" href="#popup-allcombatpopupcompact"&gt;All Combat&lt;img src ="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/battle-gear.png?raw=true" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/battle-gear.png?raw=true</a>" style="left: -81pt;"&gt;&lt;/a&gt; &lt;/div&gt; &lt;!-- close box --&gt; &lt;div id="popup-allcombatpopupcompact" class="overlay"&gt; &lt;div class="popup"&gt; &lt;h2&gt;All Combat&lt;/h2&gt; &lt;a class="close" href="#"&gt;×&lt;/a&gt; &lt;div class="content"&gt; &lt;p&gt;All Combat is your starting CP for &lt;strong&gt;any equipped weapon&lt;/strong&gt;, including both Melee and Ranged combat, and potentially even Combat Magic. This includes grappling, fighting unarmed, throwing things, ranged weapons, etc. &lt;br&gt;&lt;br&gt; You can &lt;strong&gt;specialize&lt;/strong&gt; in either 'Ranged Combat' or 'Melee Combat'. You can also specialize in &lt;strong&gt;maneuvers&lt;/strong&gt; that apply to any weapon used, such as 'Targeted Location: Legs', 'Attack from Surprise', etc. &lt;/p&gt; &lt;/div&gt; &lt;!-- close content --&gt; &lt;/div&gt; &lt;!-- close popup --&gt; &lt;/div&gt; &lt;!-- close popup1 id overlay --&gt; &lt;/span&gt; &lt;input type="text" class="skilltotalfield" name="attr_allcombatskilltotal" value=""&gt; &lt;span class="skillrollbutton"&gt;&lt;/span&gt; &lt;/div&gt;

That is what clip path does, it clips everything contained in the element that is being clipped so it doesn't show outside of the clip path. To do a hover over this, you need to have the hover element be outside the clipped element.

Ah bummer. Is there any way to do that with the &lt;a&gt; method linked above? Like have the popup linked elsewhere on the sheet? Or better yet, an alternate way to get that look without clip-path?

Well I googled around, knowing I can't use clip path, and found this solution. Adding a :before element that's basically another background color layer, and matching the layer colors with existing background colors. Then just need to align the margins and such, and fiddle. div.skillnamefieldprimary:before { content: ''; position: relative; top: 4pt; right: -49pt; border-top: 8px solid #3f3b3b; border-left: 9px solid #b2b7b7; width: 0pt; height: 0pt; } Except it's introducing all kinds of other issues. Like trying to get it to align to the text, or frogging with existing formatting.

I hate that before method. It's almost impossible to do more complex styling with it. I'd set it up like this: &lt;div class="popup-container"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="popup"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="clipped-container"&gt;your original stuff here&lt;/div&gt; &lt;/div&gt; Then, just do the control of whether the popup shows up on hover of the popup-container while the clipped container has the clip path applied to it.

Thanks for the help, but I'm really not following along here. Normally the "popup-container" so to speak, is within the span with corresponding span class that existed, prior to adding an &lt;a&gt; popup. I usually replace the span text with text for the a class="button". (and remove the original span text). However, the span styling is then applied to the &lt;a&gt; text. I'm not sure what the popup-container would have to be for this styling to still work. I tried this, and putting the original span stuff in other places, but just get weird monstrosities. &lt;div class="box"&gt; &lt;a class="button" href="#popup-allcombatpopupcompact"&gt;All Combat&lt;/a&gt; &lt;/div&gt; &lt;div id="popup-allcombatpopupcompact" class="overlay"&gt; &lt;div class="popup"&gt; &lt;h2&gt;All Combat&lt;/h2&gt; &lt;a class="close" href="#"&gt;×&lt;/a&gt; &lt;div class="content"&gt; &lt;p&gt;All Combat is your starting CP for &lt;strong&gt;any equipped weapon&lt;/strong&gt;, including both Melee and Ranged combat, and potentially even Combat Magic. This includes grappling, fighting unarmed, throwing things, ranged weapons, etc. &lt;br&gt;&lt;br&gt; You can &lt;strong&gt;specialize&lt;/strong&gt; in either 'Ranged Combat' or 'Melee Combat'. You can also specialize in &lt;strong&gt;maneuvers&lt;/strong&gt; that apply to any weapon used, such as 'Targeted Location: Legs', 'Attack from Surprise', etc. &lt;/p&gt; &lt;/div&gt; &lt;!-- close content --&gt; &lt;/div&gt; &lt;!-- close popup --&gt; &lt;!-- ORIGINAL STUFF --&gt; &lt;span class="skillnamefieldprimary" name="attr_allcombat"&gt;All Combat&lt;img src ="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/battle-gear.png?raw=true" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/battle-gear.png?raw=true</a>" style="left: -81pt;"&gt; &lt;/span&gt; &lt;/div&gt; &lt;!-- close popup id, class="overlay" --&gt; Original styling is missing in the bottom left there, and it just shows up as part of the popup now. I'm still relatively new/amateurish when it comes to terminology for this stuff.