【发布时间】：2016-09-09 09:21:57
【问题描述】：
借助 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/
（按钮最初是透明的，并且位于图像背景之上。）
【问题讨论】：
-
使用 Bootstrap，事情变得简单且响应迅速。
-
检查此网址：codecanyon.net/item/pure-css-buttons-with-arrow/… 希望对您有所帮助:)
-
这是一个已知问题，因为（粗略地说）您在过渡期间将半透明白色放在另一个半透明白色之上，因此重叠区域自然会显得更白。您可以在this fiddle 中执行类似操作，但您会看到悬停区域（或点击区域）并不完全位于右侧的形状内。
-
@Harry 谢谢，我喜欢这个解决方案 :) 悬停区域是矩形的......但我认为它比过渡期间的那个奇怪的数字更好！如果您将其发布为答案，我会接受。
-
@SunilGehlot 谢谢...有使用纯色背景，我需要透明背景:)
标签： css css-transitions css-shapes css-transforms