是否可以制作一个“双箭头”？ CSS3内容技术？ [英] Is it possible to make a "double arrow" with css3 content technique?

问题描述

我正在寻找一种仅使用CSS重新创建

（您实际上可以只使用渐变来完成此操作，但是当鼠标悬停在箭头本身，但悬停在矩形元素上nt包含它）

HTML ：

 < a class ='boo'href ='＃'>点击我< / a> 
  

相关 CSS ：

  .boo {
 display：inline-block; 
职位：相对； 
 padding：.5em 2em; 
背景：
线性渐变（60deg，dodgerblue 50％，透明50％）100％0，
线性渐变（-60deg，透明50％，dodgerblue 50％）100％100 ％，
线性梯度（-90deg，透明1em，dodgerblue 1em）; 
背景重复：不重复； 
背景大小：1em 50％，1em 50％，100％100％； 
} 
 .boo：之前，.boo：之后{
位置：绝对； 
对：-.2em; 
宽度：.5em；高度：50％; 
背景：dodgerblue； 
内容：’； 
} 
 .boo：before {{
 top：0; 
转换：skewX（30deg）; 
} 
 .boo：after {
 bottom：0; 
转换：skewX（-30deg）; 
} 
  

编辑：

如果您的背景是纯色，而不是图像或渐变，则可以使用更简单的方法来完成它，而无需使用渐变（这意味着第二种方法还具有在IE9）。

演示＃2

  .boo {
 display：inline-block; 
职位：相对； 
 padding：.5em 2em; 
背景：浅蓝色； 
} 
 .boo：之前，.boo：之后{
位置：绝对； 
对：-.3em； 
宽度：.5em；高度：50％; 
盒子阴影：-.2em 0 0白色; 
背景：继承； 
内容：’； 
} 
 .boo：before {{
 top：0; 
转换：skewX（30deg）; 
} 
 .boo：after {
 bottom：0; 
转换：skewX（-30deg）; 
} 
  

Im looking for a way to recreate this button with CSS only.

I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images).

The buttons I need this style on are <input["submit"]> and ordinary <a>'s.

解决方案

With one element, you could do it using gradients and skewed pseudo-elements for a link:

demo

(you could actually do it using just gradients, but then a hover action won't be triggered on hover on the arrow shape itself, but on hover on the rectangular element containing it)

HTML:

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

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

EDIT:

If your background is a solid color, not an image or a gradient, you could do it in a much simpler way, without using gradients (which means that this second method also has the advantage of working in 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);
}

这篇关于是否可以制作一个“双箭头”？ CSS3内容技术？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！