Hide / Show panel on click inside complex shape container - html

Question

Just trying to figure out the layout to make this work. I have to show and hide a menu when you click on the arrow shape at the bottom of the icon panel and then show the panel when i click the same shape again. The part that is troubling me is how to shape the arrow container, should i use css3 shapes or just a backgound img for that part (which seems unlikely to me since it have to fit perfectly with the icons container) or just make the whole thing (tne container and the bottom shape a css3 shape).
I know how to make the toggle up / down work but just trying to layout this the best way possible, any ideas will be really appreciated. I can use css3 shapes, flex, etc, crossbrowsing is not an issue for this one.
Here's the images:
Here's the html that i have so far:
<nav class="l-apps l-container">
<ul>
<li>
<img src="assets/img/icons/google.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/word.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/file.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/network.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/powerpoint.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/diamond.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/other.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/pencil.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/excel.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/triangle.png">
Lorem Ipsum
</li>
</ul>
</nav>

Answer 1

Well i figure it out in case somebody else needs to do this someday:
Basically same html but adding some containers for the css3 shaped div with the toggle trigger:
<nav class="l-apps l-container">
<ul>
<li>
<img src="assets/img/icons/google.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/word.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/file.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/network.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/powerpoint.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/diamond.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/other.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/pencil.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/excel.png">
Lorem Ipsum
</li>
<li>
<img src="assets/img/icons/triangle.png">
Lorem Ipsum
</li>
</ul>
<div class="shape-container">
<div class="base">
<i class="icon-toogle fa fa-angle-double-up"></i>
</div>
</div>
</nav>
Then this is the scss for the shape:
.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;
}
}
Now i have other problem, the whole shape have a pattern background image (the icon container and the css shape at the bottom), i can't get to put a background image to the shape, maybe because i use borders to make the css shape. Is there a way to put a background image on the shape ?

Answer 2

my idea is
$('div').on('click', function(){
var _class = $(this).hasClass('a-top') ? 'b-top' : 'a-top';
$(this).attr('class',_class);
});
.a-top {
background: #f00;
height: 50px;
top:0px;
transition: all .3s ease-out;
}
.b-top {
background: #f00;
height: 100px;
transition: all .3s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a-top">
menu click me.
</div>