Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
HTML
<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>


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


What I have tried:

I've tried many different examples that I've found but none do what I want.
Here is an example of what I'm trying to do:
Consulting PSD Template #57116[^]
Posted
Updated 27-Apr-18 7:30am

1 solution

Something like this should get you started:
CSS
ul.tabs li.active
{
    position: relative;
    overflow: visible;
}
ul.tabs li.active::before
{
    content: " ";
    position: absolute;
    top: 100%;
    left: calc(50% - 25px);
    height: 0;
    width: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 20px solid #0c2966;
}

Demo[^]

  • To adjust the colour of the triangle, change the border-top colour;
  • To adjust the height of the triangle, change the border-top size;
  • To adjust the with of the triangle, change the border-left and border-right sizes, and the 25px inside the calc expression for the left position;
 
Share this answer
 
Comments
Member 13801698 27-Apr-18 14:12pm    
That worked perfectly! Thank you!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900