Css 带右箭头的按钮-转换

在css转换和伪元素的帮助下，我制作了带有箭头形状右边框的css按钮。现在，我试图在悬停状态下将过渡添加到背景，但意识到有一个问题，在按钮被伪元素重叠的地方，过渡期间颜色不同。请参见下面的内容，尝试将按钮悬停：

正文{
背景：灰色；
背景图像：线性梯度（30度，#445 12%，透明12.5%，透明87%，#445 87.5%，#445），
线性梯度（150度，#445 12%，透明12.5%，透明87%，#445 87.5%，#445），
线性梯度（30度，#445 12%，透明12.5%，透明87%，#445 87.5%，#445），
线性梯度（150度，#445 12%，透明12.5%，透明87%，#445 87.5%，#445），
线性梯度（60度，#99a 25%，透明25.5%，透明75%，#99a 75%，#99a），
线性梯度（60度，#99a 25%，透明25.5%，透明75%，#99a 75%，#99a）；
背景尺寸：80px 140px；
背景位置：0,0,40px70px，40px70px，0,0,40px70px；
字体系列：无衬线；
}
.更偏斜{
显示：内联块；
位置：相对位置；
颜色：白色；
文字装饰：无；
边框：纯色2px白色；
边界权：无；
框大小：边框框；
填充：15px 40px；
字母间距：3px；
过渡：所有1都放松；
}
.更偏斜：以前{
内容：''；
位置：绝对位置；
左：100%；
左边距：-10px；
顶部：-2px；
底部：50%；
右边框：纯色2px白色；
变换：skewX（25度）；
宽度：15px；
背景：继承；
}
.更偏斜：之后{
内容：''；
位置：绝对位置；
左：100%；
左边距：-10px；
底部：-2px；
最高：50%；
右边框：纯色2px白色；
变换：skewX（-25度）；
宽度：15px；
背景：继承；
}
.更加倾斜：悬停{
颜色：黑色；
背景：白色；
}

---

如果链接所在的背景只是一种纯色，如所提供的示例中所示，您可以使用两个三角形来实现这一点，如下所示：

*{框大小：边框框；字体系列：无衬线；}
身体{
背景：#333；
}
a{
边框：2倍实心#fff；
右边界：0；
颜色：#fff；
显示：内联块；
字母间距：3px；
线高：50px；
填充：0 40px；
位置：相对位置；
文字装饰：无；
文本转换：大写；
过渡：背景1s缓和，颜色1s缓和；
}
a:以前{
边框顶部：27px实心透明；
左边框：14px实心#fff；
边框底部：27px实心透明；
内容：“；
位置：绝对位置；
右图：-14px；
顶部：-2px；
}
a:之后{
边框顶部：25px实心透明；
左边框：12px实心#333；
边框底部：25px实心透明；
内容：“；
位置：绝对位置；
右：-12px；
排名：0；
过渡：不透明度1s缓解；
}
a:悬停{
背景：#fff；
颜色：#333；
}
a:悬停：：之后{
不透明度：0；
}

---

正如我在评论中所说，这是意料之中的，因为大致说来，在有重叠的区域，一个半透明的白色层被放置在另一个这样的层的顶部，因此，该区域很快就会比其他区域更白

使用倾斜变换：

一种解决方案与下面的代码片段类似，但它使悬停/命中区域成为矩形。我在这里所做的是让伪元素创建整个形状（除左边框外），并且父对象上的

溢出隐藏

防止左侧不需要的倾斜部分出现

正文{
背景：灰色；
字体系列：无衬线；
}
.更偏斜{
显示：内联块；
位置：相对位置；
颜色：白色；
文字装饰：无；
左边框：纯色2px白色；
框大小：边框框；
填充：15px 40px；
字母间距：3px；
过渡：所有1都放松；
溢出：隐藏；
}
.更偏斜：以前{
内容：''；
位置：绝对位置；
左：-2px；
顶部：0px；
底部：50%；
右边框：纯色2px白色；
边框顶部：纯色2px白色；
变换：skewX（25度）；
变换原点：右下角；
宽度：100%；
过渡：所有1都放松；
z指数：-1；
}
.更偏斜：之后{
内容：''；
位置：绝对位置；
左：-2px；
底部：0px；
最高：50%；
右边框：纯色2px白色；
边框底部：纯色2px白色；
变换：skewX（-25度）；
变换原点：右上角；
宽度：100%；
过渡：所有1都放松；
z指数：-1；
}
.更加倾斜：悬停{
颜色：黑色；
}
.更歪斜：悬停：之前，
.更加倾斜：悬停：之后{
背景：白色；
}

---

请检查下面带有

转换的箭头代码，希望对您有所帮助

谢谢

HTML

<a class="arrow_box">
MORE
</a>

勾选
否，它位于图像背景上：）您可以更新您的问题（以及示例，如果可能）以包含该信息吗？谢谢，但在所需的设计中，按钮最初是透明的，只有白色边框，因为它位于图像背景上使用引导，通过使用引导，事情变得简单且响应迅速。请检查以下Url：希望它有帮助：）这是一个已知的问题，因为（粗略地说）在过渡期间，您将半透明白色置于另一个半透明白色之上，因此重叠区域自然会显得更白。您可以执行类似于中的操作，但正如您所看到的，悬停区域（或命中区域）不完全在右侧的形状内。@Harry谢谢，我喜欢此解决方案：）悬停区域为矩形。。。但我认为这比过渡期间那个奇怪的数字要好！如果您将其作为答案发布，我将接受。@SunilGehlot谢谢。。。有使用的固体背景，我需要透明背景：）谢谢！第二种解决方案很聪明，但在右边界附近有一条非常小的半透明线。即使我将渐变替换为长方体阴影：。我猜这是由变换引起的错误。实际上是边界和渐变@Julia。这就是我在m中提到的渲染问题
body {
  background: gray;
  font-family: sans-serif;
}
.arrow_box {
    position: relative;
    background: gray;
    border: 2px solid #ffffff;
  display:inline-block;
  padding: 15px 40px;
  letter-spacing: 3px;
  color:#FFF;
  transition:0.4s;
}
.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  transition:0.4s;
}

.arrow_box:after {
    border-color: rgba(128, 128, 128, 0);
    border-left-color: gray;
  border-width: 24px;
  margin-top: -24px;
}
.arrow_box:before {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #ffffff;
    border-width: 26px;
  margin-top: -26px;
  margin-left: 2px;
}
.arrow_box:hover{
  color:#000;
  background:#FFF;
}
.arrow_box:hover:after{
  border-left-color: #FFF;
}