我想通过单击按钮来更新多边形 我想做的是当我点击按钮“点击我”时，我希望中间的灰色条纹在右边（填充其余部分），但是我不知道怎么做它，因为我对HTML，CSS和JavaScript几乎一无所知。

提前谢谢

正文
{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
颜色：白色；
溢出：隐藏；
字体大小：粗体；
背景图像：url（'https://i.imgur.com/PSr4n0g.png');
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
}
.形状{
剪辑路径：多边形（25%0%，0.0，75%100%，100%100%）；
位置：固定；
高度：100%；宽度：100%；
}
.造型风格{
背景色：#20232d；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
过滤器：不透明度（55%）
z指数：-1；
}

点击我！
window.dataLayer=window.dataLayer | |[]；函数gtag（）{dataLayer.push（arguments）；}gtag（'js'，new Date（））；gtag（“配置”、“UA-73378277-10”）；
var play=false；
var myAudio=document.getElementById（“leson”）；
myAudio.volume=0.1；
函数onKeyDown（事件）{
开关（event.keyCode）{
案例32://空格键
如果（玩）{
myAudio.pause（）；
玩=假；
}否则{
myAudio.play（）；
玩=真；
}
打破
}
返回false；
}
window.addEventListener（“keydown”，onKeyDown，false）；

您可以像下面这样做。请注意，在多边形末端添加了一个额外的点，我在添加类时会更改该点：

函数灰色（）{
document.querySelector（'.Shape'）.classList.toggle（“单击”）
}

正文{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
颜色：白色；
溢出：隐藏；
字体大小：粗体；
背景图像：url（'https://i.imgur.com/PSr4n0g.png');
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
}
.形状{
剪辑路径：多边形（25%0%，0.0，75%100%，100%100%，100%100%）；
位置：固定；
身高：100%；
宽度：100%；
过渡：0.5s；
}
.Shape.clicked{
剪辑路径：多边形（25%0%，0.0，75%100%，100%100%，100%0%）；
}
.造型风格{
背景色：#20232d；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
滤镜：不透明度（55%）；
z指数：-1；
}

点击我！

您可以像下面这样做。请注意，在多边形末端添加了一个额外的点，我在添加类时会更改该点：

函数灰色（）{
document.querySelector（'.Shape'）.classList.toggle（“单击”）
}

正文{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
颜色：白色；
溢出：隐藏；
字体大小：粗体；
背景图像：url（'https://i.imgur.com/PSr4n0g.png');
背景尺寸：封面；
背景重复：无重复；
背景附件：固定；
}
.形状{
剪辑路径：多边形（25%0%，0.0，75%100%，100%100%，100%100%）；
位置：固定；
身高：100%；
宽度：100%；
过渡：0.5s；
}
.Shape.clicked{
剪辑路径：多边形（25%0%，0.0，75%100%，100%100%，100%0%）；
}
.造型风格{
背景色：#20232d；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
滤镜：不透明度（55%）；
z指数：-1；
}

点击我！