如何将 html 元素定义为具有多边形形状，以及如何使用动画更改形状？答案

【问题标题】：How to define an html element to have a polygon shape, and how to change the shape with animation?如何将 html 元素定义为具有多边形形状，以及如何使用动画更改形状？
【发布时间】：2020-02-14 07:54:54
【问题描述】：

我正在尝试在 html 中创建这个按钮，并带有如下的小动画。

如何在 css 中制作以下多边形形状，以及如何在悬停时将其移动到动画中的常规矩形？

这就是我想要让它看起来的样子：

这是悬停时的样子：

感谢您的帮助

【问题讨论】：

显示您已经尝试过的内容。同时检查：css-tricks.com/almanac/properties/a/animation
没有任何效果，我无法编写 css 代码来实现这个 XD
i can't code css - 为什么会这样？
你说你已经尝试过......告诉我们那个。
我将投票重新打开它，因为这不是一个简单的“家庭作业”问题。动画 HTML/CSS 是一个相当高级的主题，即使是有成就的程序员也会为之苦恼。

标签： javascript html css

【解决方案1】：

有点乱，但这是我目前得到的：

body {
background-color: #FFB504;
}
.cta {
  color: white;
  border: none;
  width: 240px;
  height: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-family: sans-serif;
  cursor: pointer;
  position:relative;
  background-color: transparent;
  outline: none;
}
.cta-content {
padding-right: 20px;
  transition: all .3s ease;
  z-index:1;
}

.cta:before {
 clip-path: polygon(10px 10px, 230px 10px, 190px 70px, 10px 70px);
  transition: all .3s ease;
  will-change: clip-path;
    background-color: #0081B1;

}
.cta-border, .cta-border:before, .cta-border:after, .cta:before {
content: "";
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all .3s ease;
 }
 .cta-border{
 overflow: hidden;
 }
.cta-border:before {
  
   clip-path: polygon(0px 0px, 220px 0px, 170px 80px, 0px 80px);
   border: 2px solid white;

}
.cta-border:after {
transform-origin: center center;
transform: translate(-28px, -69px) rotate(32deg);
border-right: 2px solid white;
height: 94.34px;
}
.cta:hover .cta-content {
padding-right: 0;
}
.cta:hover:before, .cta:hover .cta-border:before {
clip-path: polygon( 0px 0px, 240px 0px, 240px 80px, 0px 80px);
}

.cta:hover .cta-border:after {
  transform: translate(0,0) rotate(0);
}

<button class="cta">
<span class="cta-content">HIRE ME</span>
<span class="cta-border"></span>
</button>

【讨论】：

这个答案真的可以通过解释不同的部分或至少根据其目的将 css 分组为部分来改进。这是 HTML 的一项高级功能，这里的一个好的答案可能会很有用。