<html>
<style>
.tops{
100px;
height:100px;
background:rgba(255,255,0,0.5);
position:absolute;
left:0;
top:0;
}
.container{
100px;
height:100px;
overflow:hidden;
position:relative;
}
</style>
<body>
<div class="container">
<div class="tops"></div>
</div>
</body>
<script>
let tops = document.getElementsByClassName('tops')[0],
center = {
x: 50,
y: 50
},
p1 = {
x: center.x,
y: 0
},
theta = 0,
r = 71,
delta = Math.PI / 180,
p2 = {},
p3 = {},
p4 = {},
p5 = {},
p6 = {},
p7 = {},
timer = setInterval(() => {
debugger
if (0 < theta && theta <= 0.25 * Math.PI) {
r = 50/Math.cos(theta);
p2 = {
x: center.x + r * Math.sin(theta),
y: 0
}
p3 = {
x: center.x * 2,
y: 0
}
p4 = {
x: center.x * 2,
y: center.y * 2
}
p5 = {
x: 0,
y: center.y * 2
}
p6 = {
x: 0,
y: 0
}
p7 = p1
}
if (0.25 * Math.PI < theta && theta <= 0.75 * Math.PI) {
r = 50/Math.sin(theta);
p2 = {
x: center.x * 2,
y: center.y - r * Math.cos(theta)
}
p3 = {
x: center.x * 2,
y: center.y * 2
}
p4 = {
x: 0,
y: center.y * 2
}
p5 = {
x: 0,
y: 0
}
p6 = p1
p7 = {}
}
if (0.75 * Math.PI < theta && theta <= 1.25 * Math.PI) {
r=Math.abs(50/Math.cos(theta))
p2 = {
x: center.x + r * Math.sin(theta),
y: center.y * 2
}
p3 = {
x: 0,
y: center.y * 2
}
p4 = {
x: 0,
y: 0
}
p5 = p1
p6 = {}
p7 = {}
}
if (1.25 * Math.PI < theta && theta <= 1.75 * Math.PI) {
r=Math.abs(50/Math.sin(theta))
p2 = {
x: 0,
y: center.y - r * Math.cos(theta)
}
p3 = {
x: 0,
y: 0
}
p4 = p1
p5 = {}
p6 = {}
p7 = {}
}
if (1.75 * Math.PI < theta && theta <= 2 * Math.PI) {
r=Math.abs(50/Math.cos(theta))
p2 = {
x: center.x + r * Math.sin(theta),
y: 0
}
p3 = p1
p4 = {}
p5 = {}
p6 = {}
p7 = {}
}
let arrays = [p1, center, p2, p3, p4, p5, p6, p7];
for (let j = 0; j < arrays.length; j++) {
if (arrays[j].x === undefined) {
arrays.splice(j, 1);
j--
}
}
let strings = 'polygon(';
for (let j = 0; j < arrays.length; j++) {
strings += `${arrays[j].x}% ${arrays[j].y}% ,`
}
strings = (strings + ')').replace(',)', ')');
tops.style.clipPath = strings
theta += 1*delta;
if (theta > 2 * Math.PI) {
clearInterval(timer)
}
console.log(strings)
}, 16.6)
</script>
</html>
clip-path赋予了前端更为强大的能力可以剪切显示元素，我们可以利用这一特性实现效果：
