css - 如何仅创建此按钮形状CSS？

我为如何使用CSS做这个按钮而感到困惑。最简单的方法是使用：after带有背景图像的正确部分，但这在悬停效果上不是很好，也不干净。

我仅靠右边的蓝色箭头就能解决问题，但是这个“双箭头”使我发疯。

最佳答案

背景渐变也许？

button {
  margin:1em;
  border:none;
  padding:0.25em 3em 0.25em 1em;
  text-align:left;
  background:
    linear-gradient(-120deg, transparent 1em, #0099C3 1.05em , #0099C3 1.5em, transparent 1.45em, transparent 2em, #0099C3 2.05em) top no-repeat,
    linear-gradient(300deg, transparent 1em, #0099C3 1.05em , #0099C3 1.5em, transparent 1.45em, transparent 2em, #0099C3 2.05em) bottom no-repeat ;
  background-size: 100% 50%;
  color:white
}

<button>button button <br/> button</button>