<!DOCTYPE html> <html> <title>Paint clip-path onto mask layer</title> <style type="text/css"> #inner { width: 200px; height: 200px; box-sizing:border-box; background: blue; /* make clip-path pained on mask layer */ border: 1px solid transparent; will-change: transform; } #outer { width: 200px; height: 200px; clip-path: url(#path); /* make it fixed so that inner div has different AGR with outter div */ position: fixed; } </style> <div id="outer"> <div id="inner"></div> </div> <svg height="0"> <defs> <clipPath id="path"> <rect x="0" y="0" width="100" height="100"/> </clipPath> </defs> </svg> </html>