使用CSS指向非活動選項卡的活動選項卡？

有沒有辦法，使用CSS，使其點擊一個選項卡（如下圖所示），選項卡「指向」非活動選項卡？使用CSS指向非活動選項卡的活動選項卡？

我試圖讓綠色選項卡1（在下圖中）指向選項卡2和3，然後如果您單擊選項卡2，它指向選項卡3.但是，當您單擊選項卡3，它將保持矩形（沒有箭頭）。

我一直在嘗試各種堆棧溢出片段，它能夠成功地將箭頭放在選項卡的上方或下方，但似乎沒有工作與活動選項卡旁邊的非活動選項卡重疊。

這是我的HTML的基本結構：

<ul> 
    <li class="active"> 
    <a href="#">Tab 1</a> 
    </li> 
    <li> 
    <a href="#">Tab 2</a> 
    </li> 
    <li> 
    <a href="#">Tab 3</a> 
    </li> 
</ul>

至於CSS的，我一直在使用的片段像這樣的：https://codepen.io/mimoYmima/pen/MwzQym

的問題，我一直在運行進入似乎是，因爲選項卡左側浮動，我不能使活動選項卡的箭頭重疊其他選項卡。

來源

2017-08-01 Chris Beaman

重疊是你的最後一個問題。 **保留漸變**是最糟糕的問題。你有沒有試圖從這個codepen例子中創造出一些東西？ –

另外...當選擇「Tab2」時，你的*「圖表」*看起來如何？ –

謝謝你們。根據我的圖表，當我點擊「標籤2」時，它將採用與「標籤1」相同的有角度的活動標籤。但是對於「Tab 3」，我想它只是綠色的，而不是指向任何地方。現在不要想到漸變 - 這只是一個快速的Photoshop作業來說明標籤的外觀。 –

-1

你並不需要浮動箭頭的div。

我已經分叉了您鏈接到的編碼器並編輯了CSS以在您共享的圖形中創建效果。這裏是我的編輯後的版本：

https://codepen.io/sigil/pen/YxWZGa

<!-- language: lang-css --> 
/* Button-arrow CSS: */ 
.arrow { 
    cursor: pointer; 
    display: inline-block; 
    height: 40px; 
    position: relative; 
    line-height: 2.5em; 
    padding-left: 2em; 
    padding-right: 2em; 
    background: white; 
    color: black; 
    border: 1px solid #eee; 
} 
.arrow:after { 
    border-left: 20px solid white; 
} 
.arrow.active { 
    background-color: yellow; 
} 
.arrow.active, 
.arrow.active:after { 
    z-index: 50; 
    border-left: 20px solid yellow; 
} 
.arrow.active:after { 
    content: ""; 
    position: absolute; 
    border-bottom: 20px solid transparent; 
    border-top: 20px solid transparent; 
    height: 0px; 
    width: 0px; 
    margin-right: -20px; 
    right: 0; 
} 
.arrow:hover, 
.arrow:active { 
    background: yellow; 
    color: black; 
} 
.arrow:hover:after, 
.arrow:active:after { 
    border-left: 20px solid yellow; 
} 

/* General styles to set a baseline 'look' - not related to the button-arrow CSS above */ 
body, html { 
    font-family: helvetica; 
    background: #333; 
    color: #CCC; 
} 
.content { 
    text-align: center; 
    margin: 0 auto; 
} 

a:visited, a:link { 
    color: #F93; 
} 
<!-- language: lang-html --> 

<html> 
<body> 
    <div class="content"> 
    <p>Button with an arrow on the right. Just uses an anchor tag and css, so you can use it with your existing buttons easily by just adding the class of "arrow"! Also includes a hover state.</p> 

    <a class="arrow active">Arrow</a><a class="arrow">Arrow</a><a class="arrow">Arrow</a> 
    </div> 
</body> 
</html> 

<!-- end snippet -->

來源

2017-08-01 22:35:01 sigil

這個解決方案是最適合我的解決方案。感謝您的幫助@sigil！ –

不客氣，很高興幫助。羞恥我被別人拒絕了。 :( – sigil

您可以利用絕對定位作爲活動標籤的箭頭僞元素。除非列表項被賦予「活動」選項卡，否則它將被隱藏。原始的HTML標記保持不變。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
} 
 
body { 
 
    display: flex; 
 
} 
 
ul { 
 
    margin: auto; 
 
    padding: 0; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    background-color: #eee; 
 
    background-image: linear-gradient(#fff, #ddd); 
 
    border-radius: 1rem; 
 
    border: 1px #888 solid; 
 
    font-weight: bold; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 1.5rem 4rem; 
 
    border-right: 1px #aaa solid; 
 
    position: relative; 
 
} 
 
li:last-child { 
 
    border: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.active { 
 
    background-color: #0b0; 
 
    background-image: linear-gradient(#0b0, #090); 
 
} 
 
li.active::after { 
 
    content:''; 
 
    width: 3rem; 
 
    height: 3rem; 
 
    background-color: #eee; 
 
    position: absolute; 
 
    border: none; 
 
    transform: scaleX(0.75) rotate(45deg) translate(-50%); 
 
    top: 50%; 
 
    right: -2.45rem; 
 
    margin-top: -0.45rem; 
 
    border-top: 1px #888 solid; 
 
    border-right: 1px #888 solid; 
 
    background-color: #0b0; 
 
    background-image: linear-gradient(130deg, #0b0, #090); 
 
    border-top-right-radius: 0.5rem; 
 
}

<ul> 
 
    <li class="active"> 
 
    <a href="#">Tab 1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Tab 2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Tab 3</a> 
 
    </li> 
 
</ul>

來源

2017-08-01 22:38:56 basement

使用pseudoelement有源標籤和其他模擬三角邊境只需添加三角形。演示：

ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul > li { 
 
    padding: 10px 40px; 
 
    font-weight: bold; 
 
    font-size: 24px; 
 
    height: 40px; 
 
    border: 1px solid #000; 
 
    border-right: none; 
 
    background: linear-gradient(to bottom, #fdfdfd, #828282); 
 
} 
 

 
ul > li.active { 
 
    background: #66d835; 
 
    position: relative; 
 
} 
 

 
ul > li.active:before, 
 
ul > li.active:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
} 
 

 
/* triangle border for active tab */ 
 
ul > li.active:before { 
 
    transform: translateX(1px); 
 
    border: 30px solid transparent; 
 
    border-left-color: #000; 
 
    z-index: 1; 
 
} 
 

 
/* triangle for active tab */ 
 
ul > li.active:after { 
 
    /* border-width equal half of the height */ 
 
    border: 30px solid transparent; 
 
    border-left-color: #66d835; 
 
    z-index: 2; 
 
} 
 

 
/* border-radius for first tab */ 
 
ul > li:first-child { 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
} 
 

 
/* border-radius for last tab but not active */ 
 
/* and right border */ 
 
ul > li:not(.active):last-child { 
 
    border-right: 1px solid #000; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
ul > li > a { 
 
    height: 100%; 
 

 
    /* styles for text centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
ul > li > a, 
 
ul > li > a:hover, 
 
ul > li > a:active, 
 
ul > li > a:visited { 
 
    color: inherit; 
 
    text-decoration: none; 
 
}

<ul> 
 
    <li class="active"> 
 
    <a href="#">Tab 1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Tab 2</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Tab 3</a> 
 
    </li> 
 
</ul>

來源

2017-08-02 10:32:30

活動標籤裏面的漸變怎麼樣？你會怎麼做到這一點？ – basement

@basement我在OP的任務或圖片中看不到任何漸變，但在這種情況下，我會使用SVG或'clip-path'。 –

主動（綠色）選項卡與非主動選項一樣，具有輕微的漸變效果，這是該方法的難點。我更喜歡一種方法，它可以更好地控制箭頭和主tab1矩形的連續背景屬性。 – basement

使用CSS指向非活動選項卡的活動選項卡？

回答

相關問題