<div id="rectangle-container"> <div id="content"> Can only click on the word "me" <div id="clickme">Click me</div> </div> <div id="rectangle"></div> </div>
body { padding-top: 35px; } #rectangle-container { position: relative; } #rectangle { transform: perspective(800px) rotateY(-25deg); background: #333; height: 150px; position: absolute; top: 0; left: -85px; z-index: 0; width: 400px; } #content { position: relative; z-index: 1; padding: 10px; background: #7DC7FF; width: 330px; } #clickme { background: yellow; padding: 2px; cursor: pointer; display: inline-block; float: right; } #clickme:hover { background: orange; } #clickme:active { background: red; }