CSS3 菜单边框 - 右箭头效果答案

【问题标题】：CSS3 Menu Border - RightArrow EffectCSS3 菜单边框 - 右箭头效果
【发布时间】：2015-02-21 16:01:20
【问题描述】：

我想使用css3实现右箭头效果，我已经尝试了很多次但没有运气。

.menu li {
list-style-type: none;
display:inline;

}
.menu li a {
padding: 0 20px;
background: green;
color: #fff;
}

【问题讨论】：

想详细说明一下？也许提供一个示例图片来说明它的外观？
右向箭头？您没有为此添加任何 CSS

标签： css css-shapes

【解决方案1】：

我遇到了同样的问题，边框的方法对我来说不是很满意，特别是如果你想使用 :hover...

HTML

我在 div 中放了一个 span，这仅用于箭头。

<div class="arrow">
    I am the first arrow
    <span></span>
<div>

CSS

span get的位置：绝对；

这里 span:after 被定位和变换 (-45deg)，所以它指向右边。

最后，通过设置 span overflow:hidden，只有左侧可见的部分指向右侧...

span {
    content: "";
    position: absolute;
    top: 0;
    right: -1.625em;
    width: 2em;
    height: 2.5em;
    overflow: hidden;
    z-index: 10;
}
span:after {
    content: "";
    position: absolute;
    top: -3px;
    left: -1em;
    width: 2em;
    height: 2.5em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 1px solid #777;
    background: #60bee7;
}

我希望这是可以理解的。剩下的唯一一件事就是设置 div 和 span:after 的样式，如果你想在这些元素上定义 :hover 状态。

请注意不要给 span 任何背景颜色

这是一个工作示例：

http://jsfiddle.net/marczking/PyKFT/

【讨论】：

【解决方案2】：

如果要在这些元素的右边缘添加箭头：

Updated fiddle

我们使用 CSS 在你的锚标记之后添加一个三角形元素：

.menu li a:after{
    height:0;
    width: 0;
    top: 0;
    left: 100%;
    position:absolute;
    content: ' ';
    border-left: solid 5px green;
    border-top: solid 9px transparent;
    border-bottom: solid 9px transparent;
}

然后增加li 元素的左边距以解决这些占用的额外空间。您可以通过增加border-left 属性的像素大小来调整三角形的长度，但请务必相应地增加li 的边距。

【讨论】：

创建三角形的好技巧！ +1