3

我正在寻找一种仅使用 CSS重新创建此按钮的方法。

在此处输入图像描述

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

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

4

2 回答 2

4

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

演示

（您实际上可以只使用渐变来做到这一点，但是在悬停在箭头形状本身上时不会触发悬停动作，而是在悬停在包含它的矩形元素上时触发）

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);
}
于 2013-04-10T22:25:37.797 回答
1

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

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

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

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

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

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

于 2013-04-10T22:11:44.593 回答