CSS：如何在下拉菜单顶部放置带边框的箭头/三角形

Question

刚刚发布了这个网站(http://dovidoved.org/), 客户想在每个下拉菜单的顶部加上一个三角形/箭头。问题是菜单周围有边框，箭头应该与背景和边框融合。不确定如何实现。有建议吗？必须使用图片吗？以下是我的CSS代码：

 /* creates triangle */
 .main-navigation ul ul:before {
     border-bottom: 10px solid #fae0bb;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     content: "";
     height: 0;
     position: absolute;
     right: 0;
     top: -10px;
     width: 0;
 }

 .main-navigation ul ul {
     background: #fae0bb;
     border: 8px solid #fffefe;
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     float: left;
     position: absolute;
     margin: 0;
     top: 2.8em;
     left: -999em;
     width: 200px;
     z-index: 99999;
}

- Adam Bell

---

在.nav-menu a:after中添加CSS三角形有什么问题吗？ - Mihey Egoroff

你可以使用图像作为每个链接的背景，位于右侧，或者使用图标字体（更加通用和灵活，允许您轻松更改大小和颜色）。在第二种情况下，我建议您使用Icomoon。 - Luca Detomi

你可以使用:after伪元素添加边框 http://jsfiddle.net/ond3g1jp/ - Vitorino fernandes

你能解释一下你需要什么吗？我不明白“应该与背景和边框相融合”的意思。如果有图片就更好了。 - web-tiki

你可以使用这个链接：http://fortawesome.github.io/Font-Awesome/icon/caret-down/，这些是图标字体，所以你可以像文本一样对它们进行样式设置。 - Matjaž

Answer 1

您可以使用:before和:after伪元素来创建两个三角形：

.main-navigation ul ul:before {
    content:"";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index:9999;
}
.main-navigation ul ul:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}

你只需要为两者设置正确的right值，使它们适合你的需要。

实时示例

- EdenSource

---

太好了！感谢提供示例。真的很有效。 - Adam Bell

Answer 2

.main-navigation a:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f00;
    position: absolute;
    top: -2px;
    right: -20px;
}

调整

的内边距以匹配三角形。

- Mihey Egoroff