有没有可能做一个；双箭头“；使用css3内容技术？

我正在寻找一种只使用CSS进行重新创建的方法

我知道三角形技术，也知道如何为其添加边框，但不幸的是，我不知道如何重新创建此按钮（不添加其他包装或使用图像）

---

我需要这种样式的按钮是

和普通的

。

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

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

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

如果您的箭头是20px高，您的内框可以是例如16px加上每侧2倍的填充（如果您想更好地理解这一点，请搜索框模型）

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

---

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

对于一个元素，您可以使用渐变和扭曲的伪元素作为链接：

（实际上，您可以仅使用渐变来执行此操作，但在箭头形状本身上悬停时不会触发悬停动作，而是在包含它的矩形元素上悬停时才会触发悬停动作）

HTML：

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

.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的优点）

---

对不起，正如我在问题中提到的，我不想使用图像，因为我有很多不同类型的按钮，这种样式有不同的高度/颜色和背景。对不起，我想我没有仔细阅读你的问题。不，这不能简单地用css来完成。即使你有一个合适的字体，其中“>”字符看起来像这样，你也不能在它前面创建尖头部分。是的，你可以用CSS来做，看我的答案。看起来很棒@Ana，但是你能解释一下为什么它在地球上不能像预期的那样工作吗？它不应该在

输入

元素上工作（这就是为什么我在回答中提到了链接）。输入元素不应该有伪元素。至于按钮，由于某种原因，它的

显示

不是真正的

内联块

，即使它被设置为这样。将接受它作为答案，即使它对按钮不起作用。至少我了解到，按钮有奇怪的显示行为。@Ana-正在寻找r其他东西，但降落在这里，非常喜欢。谢谢安娜。：）

.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);
}