CSS：在我的下拉菜单顶部放置一个带边框的箭头/三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29790831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Placing an arrow / triangle with border on the top of my drop down menu
提问by Adam Bell
Just launched this website (http://dovidoved.org/) and the client wants one of those triangles / arrows on the top of each drop down menu. Problem is the menu has a border around it and the arrow should mesh with both the background as well as the border. Not sure how to do that. Any suggestions? Must I have to use an image? Here's my CSS:
刚刚启动了这个网站 ( 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;
}
回答by EdenSource
You can do this using :beforeand :afterpseudo elements, to create two triangles :
您可以使用做到这一点: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;
}
You just have to set the correct rightvalue for both to make them fit to what you need.
您只需要right为两者设置正确的值即可使它们适合您的需要。
回答by Mihey Egoroff
.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;
}
Adjust the padding of lito make triangles fit.
调整填充li以使三角形适合。
