是否可以使用css3内容技术制作“双箭头”？

Question

我正在寻找一种只用CSS重新创建this button的方法。

我知道三角技术，我也知道如何为它添加边框，但遗憾的是我不知道如何重新创建此按钮（不添加额外的包装或使用图像）。

我需要这种风格的按钮是<input["submit"]>和普通的<a>。

Answer 1

使用一个元素，您可以使用渐变和偏斜的伪元素作为链接：

demo

（你实际上可以只使用渐变来实现它，但是当悬停在箭头形状本身上时，不会触发悬停动作，但是将鼠标悬停在包含它的矩形元素上）

<强> HTML ：

<a class='boo' href='#'>click me</a>

相关的 CSS ：

.boo {
  display: inline-block;
  position: relative;
  padding: .5em 2em;
  background: 
    linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0, 
    linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
    linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
  background-repeat: no-repeat;
  background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
  position: absolute;
  right: -.2em;
  width: .5em; height: 50%;
  background: dodgerblue;
  content: '';
}
.boo:before {
  top: 0;
  transform: skewX(30deg);
}
.boo:after {
  bottom: 0;
  transform: skewX(-30deg);
}

修改：

如果你的背景是纯色，而不是图像或渐变，你可以用更简单的方式做到这一点，而不使用渐变（这意味着第二种方法也具有在IE9中工作的优势）。

demo #2

.boo {
  display: inline-block;
  position: relative;
  padding: .5em 2em;
  background: lightblue;
}
.boo:before, .boo:after {
  position: absolute;
  right: -.3em;
  width: .5em; height: 50%;
  box-shadow: -.2em 0 0 white;
  background: inherit;
  content: '';
}
.boo:before {
  top: 0;
  transform: skewX(30deg);
}
.boo:after {
  bottom: 0;
  transform: skewX(-30deg);
}

Answer 2

您应该使用背景图片。创建一个包含箭头的透明png。

您需要两个元素，外部将包含背景图像，内部将包含文本，背景颜色与箭头上的颜色相同。或者，您可以使用第二个背景图像而不是背景颜色，例如，如果您的按钮不仅仅是平面颜色。

诀窍是将包含文本的框与背景图像对齐。

如果您的箭头高20像素，那么您的内框可以是例如每侧16px加2px填充（如果您想更好地理解这一点，请搜索盒型号）。

外部元素可以将右边距设置为箭头图像的近似宽度。

我希望这是有道理的。一般技术称为sliding doors。如果你有时间，我建议阅读整篇文章。