<!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: inset(0px 100px 100px 0px); /* make it fixed so that inner div has different AGR with outter div */ position: fixed; } </style> <div id="outer"> <div id="inner"></div> </div> </html>