Я хочу обновить многоугольник одним нажатием кнопки

Question

Итак, что я хочу сделать, это когда я нажимаю кнопку «Щелкните меня», мне нужна серая полоса в середине перехода вправо (заполните остальную часть) быстрая иллюстрация того, как я хочу, чтобы он переходил , но я понятия не имею, как это сделать, так как у меня мало знаний о html, css и javascript.

Заранее спасибо.

body
{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    color:white;
	overflow:hidden;
	font-weight: bold;
  background-image: url('https://i.imgur.com/PSr4n0g.png');
   background-size: cover;
    background-repeat: no-repeat;
  background-attachment: fixed;
}
.Shape{
    clip-path: polygon(25% 0%, 0 0, 75% 100%, 100% 100%);
    position: fixed;
    height: 100%;width: 100%;
}
.ShapeStyle{
    background-color: #20232d;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: opacity(55%)
    ;z-index: -1;
} 

Answer 1

Вы можете сделать это, как показано ниже. Обратите внимание на добавление дополнительной точки в конце многоугольника, которую я изменяю при добавлении класса:

function gray() {
  document.querySelector('.Shape').classList.toggle("clicked")
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  color: white;
  overflow: hidden;
  font-weight: bold;
  background-image: url('https://i.imgur.com/PSr4n0g.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.Shape {
  clip-path: polygon(25% 0%, 0 0, 75% 100%, 100% 100%,100% 100%);
  position: fixed;
  height: 100%;
  width: 100%;
  transition:0.5s;
}
.Shape.clicked {
  clip-path: polygon(25% 0%, 0 0, 75% 100%, 100% 100%,100% 0%);
}

.ShapeStyle {
  background-color: #20232d;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: opacity(55%);
  z-index: -1;
}

<div class="Shape">
  <div style="height: 80%;width: 60%;margin-left: 10%;margin-top: 10%;">
    <div class="ShapeStyle"></div>
  </div>
</div>

<div onmouseup="gray()">
  <button class="clicky">CLICK ME!</button>
</div>

Другой вид анимации:

function gray() {
  document.querySelector('.Shape').classList.toggle("clicked")
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  color: white;
  overflow: hidden;
  font-weight: bold;
  background-image: url('https://i.imgur.com/PSr4n0g.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.Shape {
  clip-path: polygon(25% 0%, 0 0, 75% 100%, 100% 100%,100% 100%);
  position: fixed;
  height: 100%;
  width: 100%;
  transition:0.5s;
}
.Shape.clicked {
  clip-path: polygon(100% 0%, 0 0, 75% 100%, 100% 100%,100% 0%);
}

.ShapeStyle {
  background-color: #20232d;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: opacity(55%);
  z-index: -1;
}

<div class="Shape">
  <div style="height: 80%;width: 60%;margin-left: 10%;margin-top: 10%;">
    <div class="ShapeStyle"></div>
  </div>
</div>

<div onmouseup="gray()">
  <button class="clicky">CLICK ME!</button>
</div>