clip path experiment

by Richard Hunter

HTML

<div class='foo alpha'></div>
<div class='foo beta'></div>
<div class='foo gamma'></div>
<svg height="0" width="0">
    <defs>
        <clipPath id="bar" clipPathUnits="objectBoundingBox">
            <circle cx="0.5" cy="0.5" r="0.5" fill="red" />
        </clipPath>
    </defs>
</svg>

CSS

.foo {
    position : absolute;
    width : 10em;
    opacity : 0.6;
    height : 10em;
    -webkit-clip-path : url(#bar);
}
.foo.alpha {
    font-size : 20px;
    background : red;
    left : 20px;
    top : 30px;
}
.foo.beta {
    
    font-size : 30px;
    left : 100px;
    top : 200px;
    background : green;
}
.foo.gamma {
    background : yellow;
    left : 150px;
    top : 35px;
    font-size : 35px;
}