<!DOCTYPE html>
<style>
    div.container { margin: 16px 0; }
    span.outer { font-size: 50px; background-color: white; font-family: ahem; }
    span.inner { outline: 5px auto green; padding: 0 10px; }
</style>
<p>
    This should be an unobscured fuzzy green polygon:
</p>
<div class="container">
    <span class="outer" style="position: relative;">
        &nbsp;<span class="inner">
            &nbsp;<div></div>&nbsp;
        </span>
    </span>
</div>
<p>
    This is just for reference:
</p>
<div class="container">
    <span class="outer">
        &nbsp;<span class="inner">
            &nbsp;<div></div>&nbsp;
        </span>
    </span>
</div>