设计标签标题CSS与标签内容连接 - 圆角

Question

我试图设计html + css标签来看起来像这样的设计： 当标签被选中时，标题连接到标签内容和“脖子”像箭头显示的轮。

我设法到目前为止这样的连接与连接的标题和内容标签一个div一个图像到这里。问题是角落不圆。 我不能做边界半径，因为它不是真正的一个div，它连接了2个div。 我相信他们是实现这种外观的更好方法。 如何在html中完成设计？

Answer 1

一个可能的解决方案是围绕所有其他选项卡中的一些形式的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> 

在你上面的例子中，蓝色，橙色和黄色标签，包围在具有边界右下半径的元素中。但是，在更一般的情况下，例如如果选择了黄色选项卡，右侧的未选定选项卡将需要边界左下角的半径。

让我知道你在想什么！