Díra v HTML (doslova)

Toto je taková techničtější záležitost, ale i tak to napíši na tento blog.

Nejedná se o žádnou bezpečnostní chybu, ale doslova o to, jak vytvořit díru do html elementu, konkrétně kulatou do čtvercového DIVu, například.
Řešení, které by bylo ideální jsem nenašel, přesto že jsem o tom přemýšlel už dlouho. V podstatě jsem došel k jedinému řešení, které alespoň z části vyhovovalo.

Požadavky byly následující:

• vytvořit pouze pomocí HTML a CSS čtverec (div) a v něm díru/kruh
• přes kruh musí být vidět
• přes kruh by mělo jít proklikávat (propouštět události myši na elementy pod naším prvkem - divem)

Jediné řešení, na které jesm přišel, nesplňuje poslední podmínku, našel jsem zde na Stackoverflow řešení pomocí 4 divů, to ovšem vytváří pouze obdélník/čtverec(ale zase splňuje třetí požadavek).

Moje řešení je inspirováno dalším řešením, které je také probíráno na Stackoverflow (u toho samého dotazu), kde se prvku nastaví transparentní pozadí a pracuje se s okraji. To už je vlastně mé řešení (takže není tak úplně moje), pouze používám border-radius a druhý DIV, který pokryje rohovou oblast.

řešení si můžete prohlédnout zde:

PRUH s malým z-index'em

Zde v HTMLWebEditoru si můžete po vložení následujícího kódu do levé části aplikace s řešení pohrát (omlouvám se za prasárny v kódu a možnou nekompatibilitu se staršími prohlížeči, jsem línej).

<div id="ctverec">

   <div id="ctverec2"></div>

</div>



<div id="pruh">PRUH s malým z-index'em</div>

<style>

#rightcont
{
background-color:red;
}

#ctverec
{
position:relative;
width:100px;
height:100px;
background-color:transparent;
border:45px solid blue;
z-index:10;
border-radius:95px;

}

#ctverec2
{
position:relative;
width:100px;
height:100px;
top:-45px;
left:-45px;
background-color:transparent;
border:45px solid blue;
z-index:10;
}

#pruh
{
position:relative;
height:15px;
width:550px;
top:-100px;
background-color:yellow;
z-index:9;
color:black;
}

</style>

Nefunkčnost proklikávání lze demonstrovat pokusem upravit text žlutého pruhu (musí být v aplikaci zatrženo "Editovatelné"), vše ostatní editovat lze.

Také můžete zkusit prohodit id ctverec a ctverec2 ;)

Pokud máte někdo lepší řešení, napište ho prosím do komentáře.