html - 在复杂形状容器内单击时隐藏/显示面板

Question

只是想找出使这项工作可行的布局。当您单击图标面板底部的箭头形状时，我必须显示和隐藏一个菜单，然后当我再次单击相同的形状时显示该面板。困扰我的部分是如何塑造箭头容器，我应该使用 css3 形状还是只为该部分使用背景 img(这对我来说似乎不太可能，因为它必须与图标容器完美契合)或者只是制作整个东西(容器和底部形状为 css3 形状)。

我知道如何使向上/向下切换工作，但只是尝试以尽可能最好的方式对其进行布局，任何想法都将不胜感激。我可以使用 css3 形状、flex 等，交叉浏览对这个来说不是问题。

图片如下:

这是我到目前为止的 html:

            <nav class="l-apps l-container">
            <ul>
                <li>
                    <img src="assets/img/icons/google.png">  
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/word.png">                     
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/file.png">
                    <a href="#">Lorem Ipsum</a>                         
                </li>
                <li>
                    <img src="assets/img/icons/network.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/powerpoint.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/diamond.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/other.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/pencil.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/excel.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/triangle.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
            </ul>
        </nav>

Answer 1

好吧，我弄清楚了，以防有一天其他人需要这样做:

基本相同的 html，但使用切换触发器为 css3 形状的 div 添加了一些容器:

            <nav class="l-apps l-container">
            <ul>
                <li>
                    <img src="assets/img/icons/google.png">  
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/word.png">                     
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/file.png">
                    <a href="#">Lorem Ipsum</a>                         
                </li>
                <li>
                    <img src="assets/img/icons/network.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/powerpoint.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/diamond.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/other.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/pencil.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/excel.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
                <li>
                    <img src="assets/img/icons/triangle.png">                         
                    <a href="#">Lorem Ipsum</a>
                </li>
            </ul>
            <div class="shape-container">    
                <div class="base">
                    <a href="#"><i class="icon-toogle fa fa-angle-double-up"></i></a>
                </div>
            </div>        
        </nav>

然后这是形状的 scss:

    .base {
    background: $blue;
    display: inline-block;
    height: 105px;
    margin-top: 50px;
    position: relative;
    width: 150px;
    .icon-toogle {
        position:absolute;
        color: $white;
        font-size:1.8em;
        bottom:-.35em;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
    }
    &:before {
        border-top: 20px solid $blue;
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;            
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        bottom: -20px;
        width: 0;
    }
}

现在我有其他问题，整个形状有一个图案背景图像(底部的图标容器和 css 形状)，我无法将背景图像放在形状上，可能是因为我使用边框来制作CSS形状。有没有办法在形状上放置背景图像？