2016-06-09 222 views
0

我試圖設計html + css標籤來看起來像這樣的設計: 當標籤被選中時,標題連接到標籤內容和「脖子」像箭頭顯示的輪。設計標籤標題CSS與標籤內容連接 - 圓角

corner connection tab should be circle like border radius Xpx Round corners in 我設法到目前爲止這樣的連接與連接的標題和內容標籤一個div一個圖像到這裏。問題是角落不圓。 我不能做邊界半徑,因爲它不是真正的一個div,它連接了2個div。 我相信他們是實現這種外觀的更好方法。 如何在html中完成設計? enter image description here

+0

有什麼方法可以顯示當前的HTML或可能僞代碼嗎?我不明白爲什麼我們不能只用更多的div來解決:) –

+0

問題是我如何製作圖像2中帶有箭頭的部分。 – BenB

+0

請參閱更新。 –

回答

-2

一個可能的解決方案是圍繞所有其他選項卡中的一些形式的div,然後用CSS border-bottom-left-radius and border-bottom-right-radius properties

<!-- Psuedocode idea, have not tested... --> 
<div id=#tabwrapperLeft style="border-radius-bottom-right: 5px"> 
    <div>tab1</div> 
    <div>tab2</div> 
    ... 
    <div>tabI-1</div> 
</div> 

<div>tabI</div> 

<div id=#tabwrapperRight style="border-radius-bottom-left: 5px"> 
    <div>tabI+1</div> 
    ... 
    <div>tabN</div> 
</div> 

在你上面的例子中,藍色,橙色和黃色標籤,包圍在具有邊界右下半徑的元素中。但是,在更一般的情況下,例如如果選擇了黃色選項卡,右側的未選定選項卡將需要邊界左下角的半徑。

讓我知道你在想什麼!

+0

我想我喜歡你寫的。問題在於驗屍官在「div」外「圓」。我添加了另一張圖片 – BenB

+0

爲了我自己的利益,任何人都會爲downvotes提供一些解釋嗎?我誤解了這個問題,還是這不是一個理想的實現? –