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

Question

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

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

我需要这种风格的按钮是

<input["submit"]>

和普通的

<a>

。

Answer 1

2024 解决方案，不需要伪代码

该形状是使用两个

conic-gradient()

遮罩层加上

clip-path

创建的。早在 2013 年，这些功能都还没有出现。

.click-me {
    --ang: 120deg;
    --tri: .5*(.5turn - var(--ang));
    --ini: calc(-1*(var(--ang) + var(--tri)));
    --set: from var(--ini) at calc(100% - .5em);
    --x: calc(100% - .5lh*tan(var(--tri)));
    display: inline-block;
    margin: .5em;
    padding: 0 2em 0 1.5em;
    background: lightseagreen;
    mask: 
        conic-gradient(var(--set), 
                red var(--ang), #0000 0%) -.1875em, 
        conic-gradient(var(--set), 
                #0000 var(--ang), red 0%);
    color: #fff;
    font: clamp(.75em, 8vw, 2em)/ 2.25 verdana, sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: 
        polygon(0 0, var(--x) 0, 
            100% 50%, var(--x) 100%, 0 100%);
    
    &:is(button, [type='submit']) { border: none }
    &[href] { text-decoration: none }
    
    &:is(:hover, :focus) { background: deepskyblue }
    &:focus { outline: none }
}

<button class='click-me'>click me</button>
<input type='submit' value='click me' class='click-me'/>
<a class='click-me' href='#'>click me</a>

2013 年解决方案，因网络历史记录原因而保留

对于一个元素，您可以使用链接的渐变和倾斜伪元素来实现：

演示

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

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 像素，您的内框可能是每侧 16 像素加上 2 像素填充（如果您想更好地了解这一点，请搜索box model）。

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

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