CSS：在下拉菜单的顶部放置带边框的箭头/三角形 [英] CSS: Placing an arrow / triangle with border on the top of my drop down menu

问题描述

刚刚推出这个网站（ http://dovidoved.org/ ），客户想要其中一个三角形/箭头在每个下拉菜单的顶部。问题是菜单周围有一个边框，箭头应该与背景和边框相啮合。不知道如何做到这一点。有什么建议么？我必须使用图像吗？这是我的CSS：

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:

 /* 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;
}

推荐答案

code>：之前和：之后伪元素，以创建两个三角形：

You can do this using :beforeand :afterpseudo elements, to create two triangles :

.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;
}

您只需要设置正确的 code>两者的值，使它们适合您所需要的。

You just have to set the correct right value for both to make them fit to what you need.

Live exemple

这篇关于CSS：在下拉菜单的顶部放置带边框的箭头/三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！