Question

我有一个水平菜单，作为一个无序列表，每个列表项都是一个链接，并且有一些特殊的扩展列表项，它们是可扩展的（它们打开一个新的垂直样式菜单）。我希望菜单背景透明黑色，底部带有白色边框。我还希望可扩展列表项有一个底部箭头。不幸的是，将外三角形设置为白色，将内三角形设置为透明黑色，则显示下方的白色三角形。有没有办法获得一个真正透明的内三角形，以便菜单可以放在背景图像或纹理上？

http://jsfiddle.net/RMCtk/2/

HTML：

<body>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li class="expand"><a href="#">Product</a>
                           <ul>
                               <li><a href="#">pro1</a></li>
                               <li><a href="#">pro2</a></li>
                               <li><a href="#">pro3</a></li>
                           </ul>
                    </li>
                    <li><a href="#">lalalalalalala</a></li>
                    <li><a href="#">Pickles</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
</body>

CSS：

nav {
    top:50px;
    line-height:20px;
    font-size:20px;
    width:calc(6*150px);
    height:auto;
    box-sizing:border-box;
    }
    nav ul {
    margin:0;padding:0;
    list-style-type:none;
    }
    nav ul li {
    border:1px solid blue;
    border-right:none;border-top:none;border-left:none;
    float:left;
    width:150px;
    background-color:white;
    box-sizing:border-box;
    }
    nav ul li a {
    display:block;
    width:150px;
    padding:5px 0;
    text-align:center;
    }
    nav ul li:hover {
    background:orange;
    }
    nav ul li ul {
    display:none;
    }
    nav ul li:hover > ul {
    display:block;
    position:absolute;
    left:-450px+900px; /*margin-left + width of #nav*/
    top:30px;
    width:150px;
    }
    a:link, a:visited {
    color:black;
    font-family:Arial;
    text-decoration:none;
    }
    li.expand:before {
    content:'';
    position:absolute;
    height:0; 
    width:0;
    border-left:15px solid transparent;  /* left arrow slant */
    border-right:15px solid transparent; /* right arrow slant */
    border-top:15px solid blue; /*bg color here*/
    margin-left:60px; /*75-15*/
    margin-top:29px;
    }
    li.expand:after {
    content:'';
    position:absolute;
    height:0; 
    width:0;
    border-left:14px solid transparent;  /* left arrow slant */
    border-right:14px solid transparent; /* right arrow slant */
    border-top:14px solid rgba(0,0,0,0.5); /*bg color here*/
    margin-left:60.5px;
    }
    li.expand:hover:after,li.expand:hover:before {
    display:none;
    }

正如您在示例中所看到的，边框为蓝色，背景应为TRANSPARENT，而不是WHITE。白色与jsfiddle内容框的背景相匹配，给出了透明度的幻觉，但不是真正的透明度。如果无法做到这一点，任何人都可以提出一个“正确”的方式吗？

Answer 1

您用于创建三角形的技巧是通过操纵边框宽度。箭头是边框 - 您无法在其上设置边框颜色（如果我理解您的意思正确的话）。

创建具有真正透明背景的CSS三角形

1 个答案: