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

Question

我很难回答如何使用 CSS 制作此按钮。最简单的方法是在右侧部分使用带有背景图像的 :after，但在悬停效果方面，这并不干净利落。

我已经能够只用右边的蓝色箭头自己解决它，但是这个“双箭头”让我抓狂。

Answer 1

可能是背景渐变？

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>