Multi Polygon with webkit css

by george_black

HTML

<svg width="0" height="0">
    <clipPath id="clip1">
        <polygon points="0 100, 220 290, 300 30"></polygon>
    </clipPath>
    <clipPath id="clip2" clip-path="url(#clip1)">
        <polygon points="0 0, 9999 0, 9999 9999, 0 9999, 0 0, 150 140, 180 190, 220 30, 150 140"></polygon>
    </clipPath>
</svg>
<div id="tiles"></div>

CSS

#tiles {
    background:red;
    width:300px;
    height:300px;
    -webkit-clip-path: url(#clip2);
}