剪切具有复杂形状的div

Question

我编辑了以下笔：

https://codepen.io/scottYg55/pen/OaLrbv

我希望body { background: #383838; } section.example { position: relative; width: 900px; margin: 0 auto; h1.title { z-index: 100; position: absolute; left: 10px; top: 10px; color: #fff; font-weight: bold; } } button.btnStyle { width: 150px; height: 50px; line-height: 50px; background: #1986b5; color: #fff; font-weight: bold; text-align: center; border: 1px solid #1986b5; border-radius: 5px; box-shadow: inset 0 0 5px #1986b5; -webkit-transition: all, 0.3s, linear; -o-transition: all, 0.3s, linear; transition: all, 0.3s, linear; &:hover { background: #0c4761; } } #magnifyEffect { position: relative; margin: 0 auto; width: 900px; height: 600px; overflow: hidden; cursor: none; .masking { position: absolute; left: -15px; top: -15px; width: 300px; height: 300px; overflow: hidden; border-radius:0%; background: url("http://www.scrummable.com/wp-content/uploads/2016/02/Abstract-Triangle-Background-HD-wallpapers.jpg") no-repeat; .el { position: absolute; left: 0; top: 0; width: 900px; height: 600px; button.btnStyle { position: absolute; right: 150px; top: 200px; } } } } 部分不是标准形状，而是this shape：

new_plane = &plane_name_arr[i];

有没有一种方法可以实现？我需要更改什么？