如何仅创建此按钮形状 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>