Пытаясь сделать нижнюю часть моей "активной" вкладки заостренной, как треугольник

---

<ul class="tabs">
                <li class="active" rel="tab1">What We Do</li>
                <li rel="tab2">Who We Are</li>
                <li rel="tab3">Industries We Serve</li>
                <li rel="tab4">In The News</li>
              </ul>
              <div class="tab_container">
                <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
                <div id="tab1" class="tab_content">
                   <div class="bgrid" id="first_section1">
                    <div class="row mobile-no-padding">         

                    <div class="process bgrid-half tab-bgrid-whole group" id="industry">
                      <div class="bgrid">

                        <img src="images/icon1.png"><p><a class="smoothscroll" href="#pm"> IM/IT Project Management</a>
                      </p>  

                      </div>
                      <div class="bgrid">               

                        <img src="images/icon3.png"><p><a class="smoothscroll" href="#sim"> Virtual World Development</a>
                      </p>  

                      </div> 
                      <div class="bgrid">

                        <img src="images/icon2.png"><p><a class="smoothscroll" href="#portfolio"> Gamification</a>
                      </p>  

                      </div> 
                      <div class="bgrid">

                        <img src="images/icon4.png"><p><a class="smoothscroll" href="#staff"> Professional Staffing</a>
                      </p>  

                      </div> 
                      <div class="bgrid">

                        <img src="images/icon5.png"><p><a class="smoothscroll" href="#portfolio"> Smart Avatars</a>
                      </p>  

                      </div> 
                      <div class="bgrid">
                        <img src="images/icon6.png"><p><a class="smoothscroll" href="#cc"> Call Center Solutions</a>
                      </p>  

                      </div> 


                      <div class="bgrid">
                        <img src="images/icon7.png"> <p> <a class="smoothscroll" href="#dev"> Development & Design</a>
                        </p>

                      </div>

                      <div class="bgrid">
                        <img src="images/icon8.png"><p><a class="smoothscroll" href="#manage"> Management Consulting</a>
                      </p>  

                      </div> 

                      <div class="bgrid">

                        <img src="images/icon9.png"><p><a class="smoothscroll" href="#portfolio"> Business Intelligence</a>
                        </p>

                      </div>

                      <div class="bgrid">

                        <img src="images/icon10.png"><p><a class="smoothscroll" href="#portfolio"> Corporate Video Centers</a>
                        </p>  

                      </div>

                </div> <!-- end process -->       
            
              </div> <!-- end row -->

          </div>
          </div>

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 51px;
	border-bottom: 1px solid #333;
	width: 100%;
}

ul.tabs li {
	float: left;
	margin: 0;
	cursor: pointer;
	padding: 0px 21px;
	height: 50px;
	line-height: 45px;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	border-bottom: 1px solid #333;
	background-color: transparent;
	color: rgba(255,255,255,.8);
	overflow: hidden;
	position: relative;
}

.tab_last { border-right: 1px solid #333; }

ul.tabs li:hover {
	background-color: #ccab00;
	color: #333;
}

ul.tabs li.active {
	background-color: #0c2966;
	color: rgba(255,255,255,.8);
	border-bottom: 1px solid #fff;
	display: block;
	height: 50px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.tab_container {
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: transparent;
	overflow: auto;
}

.tab_content {
	padding: 20px;
	display: none;
}

.tab_drawer_heading { display: none; }

Что я уже пробовал:

Я пробовал много разных примеров, которые я нашел, но ни один не делает то, что я хочу.
Вот пример того, что я пытаюсь сделать:
Консалтинг PSD шаблон #57116[^]

---