是否有可能做一个“双箭头”用CSS3内容技术？(Is it possible to make a “

林寻找一种方式来重建这个按钮仅适用于CSS。

我知道三角形技术，我也知道如何添加边框，但不幸的是我不知道有什么方法来创建此按钮（无需增加额外的包装或使用图像）。

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

Answer 1:

随着一个元素，你可以使用梯度和扭曲伪元素中的链接做到这一点：

演示

（你能真正做到这一点只用梯度，但随后悬停动作将不会出现在箭头形状本身悬停被触发，但在包含矩形元素上悬停的话）

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工作的优势）。

演示＃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的填充（搜索框模型 ，如果你想了解这更好）。

外部元件可以具有一个右距设置为箭头图像的近似宽度。

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

文章来源: Is it possible to make a “double arrow” with css3 content technique?