我試圖設計html + css標籤來看起來像這樣的設計: 當標籤被選中時,標題連接到標籤內容和「脖子」像箭頭顯示的輪。設計標籤標題CSS與標籤內容連接 - 圓角
我設法到目前爲止這樣的連接與連接的標題和內容標籤一個div一個圖像到這裏。問題是角落不圓。 我不能做邊界半徑,因爲它不是真正的一個div,它連接了2個div。 我相信他們是實現這種外觀的更好方法。 如何在html中完成設計?
我試圖設計html + css標籤來看起來像這樣的設計: 當標籤被選中時,標題連接到標籤內容和「脖子」像箭頭顯示的輪。設計標籤標題CSS與標籤內容連接 - 圓角
我設法到目前爲止這樣的連接與連接的標題和內容標籤一個div一個圖像到這裏。問題是角落不圓。 我不能做邊界半徑,因爲它不是真正的一個div,它連接了2個div。 我相信他們是實現這種外觀的更好方法。 如何在html中完成設計?
一個可能的解決方案是圍繞所有其他選項卡中的一些形式的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>
在你上面的例子中,藍色,橙色和黃色標籤,包圍在具有邊界右下半徑的元素中。但是,在更一般的情況下,例如如果選擇了黃色選項卡,右側的未選定選項卡將需要邊界左下角的半徑。
讓我知道你在想什麼!
我想我喜歡你寫的。問題在於驗屍官在「div」外「圓」。我添加了另一張圖片 – BenB
爲了我自己的利益,任何人都會爲downvotes提供一些解釋嗎?我誤解了這個問題,還是這不是一個理想的實現? –
有什麼方法可以顯示當前的HTML或可能僞代碼嗎?我不明白爲什麼我們不能只用更多的div來解決:) –
問題是我如何製作圖像2中帶有箭頭的部分。 – BenB
請參閱更新。 –