HTML双曲线标签设计答案

【问题标题】：HTML Double Curved Tab DesignHTML双曲线标签设计
【发布时间】：2017-08-04 18:58:15
【问题描述】：

有什么方法可以做这种标签设计吗？我似乎无法在网上找到好的代码来完成它。每个选项卡有两个边框半径。有可能吗？

【问题讨论】：

为什么不查看该网站的来源，看看他们是如何做到的？
是的，那是个好主意，你能给我们至少链接吗？
这是我自己的设计师的设计。所以它还没有在代码中实现。我意识到我的措辞有误。对不起。但是，是的。这个设计来自我的设计师。

标签： html css tabs

【解决方案1】：

您可以在每个选项卡中使用内部 div 并为 that.set 主选项卡设置边框，现在您有两个边框

【讨论】：

【解决方案2】：

在 Google 上快速搜索“css 弯曲标签”，首先获得了一篇来自 css-tricks.com 的优秀文章：(Better) CSS Tabs With Round Out Borders。代码就在那里可以复制和粘贴，但这里是所涉及的 css 技巧的摘要：

使用 css :before 和 :after 伪元素创建具有弯曲边框半径样式的选项卡的圆形元素。（这些带有position: absolute 的伪元素本质上提供了两个额外的绘图层 - 考虑在标签的 <li> html 元素顶部放置一个透明表，然后在其上绘制标签的圆形元素。
在圆形元素上使用巧妙的 box-shadow 设置来隐藏底层 <li> 元素的方形边缘。
在<li> 元素上使用轻微的负边距以允许选项卡彼此重叠。

这将所有 css 样式保留在同一个元素上，并且可以使用不同的渐变、配色方案和样式元素轻松配置。

【讨论】：

【解决方案3】：

这绝对是可能的，但有点棘手，因为必须对效果进行一些模拟。例如，对于中间选项卡的右边缘，顶部边框曲线必须在中间选项卡上使用border-radius 定义，但底部曲线必须在right 选项卡上使用border-radius 定义.其余的效果是通过在标签后面放置具有适当背景颜色的元素来完成的。

【讨论】：

【解决方案4】：

有几种方法可以通过图像来实现。例如，您可以使用透明 png 制作背景图像。

【讨论】：