试图让我的“活跃”的底部标签指向三角形 [英] Trying to make the bottom of my "active" tab pointed like a triangle

问题描述

<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 [ ^ ]

推荐答案

这样的东西应该得到y你开始了：

Something like this should get you started:

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

演示 [^]

• 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;


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;




这篇关于试图让我的“活跃”的底部标签指向三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！