带右箭头的按钮 - 过渡

Question

在css变换和伪元素的帮助下,我用箭头形状的右边框制作了css按钮.现在我正在尝试在悬停时添加过渡到背景,但是在过渡颜色不同的过程中,在按钮与伪元素重叠的地方意识到存在问题.请参阅下面的内容,尝试将鼠标悬停在:

body {
  background: gray;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  font-family: sans-serif;
}
.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border: solid 2px white;
  border-right: none;
  box-sizing: border-box;
  padding: 15px 40px;
  letter-spacing: 3px;
  transition: all 1s ease-out;
}

.more-skewed:before {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -10px;
  top: -2px;
  bottom: 50%;
  border-right: solid 2px white;
  transform: skewX(25deg);
  width: 15px;
  background: inherit;
}

.more-skewed:after {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -10px;
  bottom: -2px;
  top: 50%;
  border-right: solid 2px white;
  transform: skewX(-25deg);
  width: 15px;
  background: inherit;
}

.more-skewed:hover {
  color: black;
	background: white;
}

<a class="more-skewed" href="#">MORE</a>

有可能解决这个问题吗？JSfiddle - https://jsfiddle.net/k9jhuc34/
(按钮最初是透明的,它是在图像背景上.)

Answer 1

正如我的评论中所述,这是预期的,因为粗略地说,发生的事情是半透明的白色层被放置在有重叠的区域中的另一个这样的层的顶部,因此,该区域很快看起来比白色更快.其余的部分.

使用偏斜变换:

一个解决方案就像在下面的代码片段中,但它使悬停/命中区域成为一个矩形.我在这里做的是使伪元素创建整个形状(除了左边框),并且overflow-hidden父元素上的a 防止左侧不需要的倾斜部分显示.

body {
  background: gray;
  font-family: sans-serif;
}
.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border-left: solid 2px white;
  box-sizing: border-box;
  padding: 15px 40px;
  letter-spacing: 3px;
  transition: all 1s ease-out;
  overflow: hidden;
}
.more-skewed:before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0px;
  bottom: 50%;
  border-right: solid 2px white;
  border-top: solid 2px white;
  transform: skewX(25deg);
  transform-origin: right bottom;
  width: 100%;
  transition: all 1s ease-out;
  z-index: -1;
}
.more-skewed:after {
  content: '';
  position: absolute;
  left: -2px;
  bottom: 0px;
  top: 50%;
  border-right: solid 2px white;
  border-bottom: solid 2px white;
  transform: skewX(-25deg);
  transform-origin: right top;
  width: 100%;
  transition: all 1s ease-out;
  z-index: -1;
}
.more-skewed:hover {
  color: black;
}
.more-skewed:hover:before,
.more-skewed:hover:after {
  background: white;
}

<a class="more-skewed" href="#">MORE</a>

使用透视旋转:

另一种解决方案可能是使用旋转变换,并添加一些透视图.通过设置适当的值,transform-origin我们可以使它产生一个梯形,可以放置在适当的位置以产生箭头.这里,悬停/命中区域保持在形状内,但只有在文本较小且静态时,此方法才有用.如果文本变长,形状右侧的斜率变得更加渐进而不是陡峭(当然,我们可以更改变换以使其看起来更好,但如果我们必须不断变化则不是很有用经常).

.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border: solid 2px white;
  border-right: none;
  box-sizing: border-box;
  padding: 16px 40px;
  letter-spacing: 3px;
  margin: 10px;
}
.more-skewed:before,
.more-skewed:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: 0;
  border-right: 3px solid white;
  transition: all 1s ease-out;
}
.more-skewed:before {
  top: -2px;
  border-top: 2px solid white;
  transform-origin: left top;
  transform: perspective(100px) rotateX(30deg);
}
.more-skewed:after {
  bottom: -2px;
  border-bottom: 2px solid white;
  transform-origin: left bottom;
  transform: perspective(100px) rotateX(-30deg);
}
.more-skewed:hover {
  color: black;
}
.more-skewed:hover:before,
.more-skewed:hover:after {
  background: white;
}
.more-skewed span {
  position: relative;
  z-index: 1;
}
body {
  background: gray;
  font-family: sans-serif;
}

<a class="more-skewed" href="#">
  <span>MORE</span>
</a>
<br/>
<a class="more-skewed" href="#">
  <span>MORE LONGER TEXT</span>
</a>

(反馈是上面的片段在IE中断了.我会在找到时间时解决这个问题.)

这是我在玩的时候想出的另一个版本.它有点像背景滑动填充效果,它将悬停/命中区域保持在形状内,但由于浏览器渲染渐变的方式,它不是很干净.想把它留在这里,以防万一你发现它很有用.

body {
  background: gray;
  font-family: sans-serif;
}
.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border: solid 2px white;
  border-right: none;
  box-sizing: border-box;
  padding: 15px 40px;
  letter-spacing: 3px;
  transition: all 1s linear;
  background: linear-gradient(245deg, transparent 9px, white 10px), linear-gradient(295deg, transparent 9px, white 10px);
  background-size: 0% 50%;
  background-position: top right, bottom right;
  background-repeat: no-repeat;
}
.more-skewed:before {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -7px;
  top: -2px;
  bottom: 50%;
  transform: skewX(25deg);
  width: 15px;
  background: linear-gradient(white, white);
  background-size: 3px 100%;
  background-repeat: no-repeat;
  background-position: top right;
  transition: all 1s 1s linear;
}
.more-skewed:after {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -7px;
  bottom: -2px;
  top: 50%;
  transform: skewX(-25deg);
  width: 15px;
  background: linear-gradient(white, white);
  background-size: 3px 100%;
  background-repeat: no-repeat;
  background-position: top right;
  transition: all 1s 1s linear;
}
.more-skewed:hover {
  color: black;
  background-size: 100% 50%;
  transition: all 1s 1s linear;
}
.more-skewed:hover:before,
.more-skewed:hover:after {
  color: black;
  background-size: 100% 100%;
  transition: all 1s linear;
}

<a class="more-skewed" href="#">MORE</a>