如何制作一个像这样的多边形按钮？

如何解决如何制作一个像这样的多边形按钮？

我创建了一个类似于此链接中的按钮多边形人字形-> Image (Button)。我已经像下面那样编写了代码，但是对于左侧的蓝色组件，我不知道如何制作，而且当我给它border-radius，Box-shadow时，我也不知道该如何制作它。图像也无法正常工作。谁能帮助我解决这个问题？

body{
  background-color:#cacaca;
}

.button{
  margin-top:40px;
  margin-left:50px;
}

.button-shape{
  background-color:#fff;
  outline:none;
  text-decoration:none;
  color:#16215C;
  padding:13px 45px;
  clip-path: polygon(90% 0,100% 75%,95% 100%,3% 100%,10% 70%,0 0);
  border-radius:0 0 10px 0;
  Box-shadow: 0px 3px 6px rgba(0,0.16);
}

.button-shape:hover{
  background-color:#16215C;
  color:#fff;
}

<div class="button">
  <a href="#" class="button-shape">Read More</a>
</div>

解决方法

您可以在按钮上附加一个drop-shadow过滤器：

filter: drop-shadow(-4px 0px 0px #0862A8);

body{
  background-color:#cacaca;
}

.button{
  margin-top:40px;
  margin-left:50px;
  filter: drop-shadow(-4px 0px 0px #0862A8);
}

.button-shape{
  background-color:#fff;
  outline:none;
  text-decoration:none;
  color:#16215C;
  padding:13px 45px;
  clip-path: polygon(90% 0,100% 75%,95% 100%,3% 100%,10% 70%,0 0);
  border-radius:0 0 10px 0;
}

.button-shape:hover{
  background-color:#16215C;
  color:#fff;
}

<div class="button">
  <a href="#" class="button-shape">Read More</a>
</div>

---

仅供参考，如果您想获得完全相同的结果，还可以使用图像：