2017-08-04 152 views
0

任何方式来做这种标签设计?我似乎无法在线获得好的代码来完成它。每个标签有两个边界半径。它甚至有可能吗?HTML双曲线标签设计

Tab Design

+1

为什么不查看该网站的来源,看看他们是如何做到的? –

+0

是的,这将是一个好主意,至少可以给我们链接吗? – Ivan

+0

这是来自我自己的设计师的设计。所以它还没有在代码中实现。我意识到我有错误的措辞。抱歉。但是,是的。这个设计来自我的设计师。 –

回答

-1

这是绝对有可能的,但有点棘手,因为效果要稍微模拟。例如,对于中间选项卡的右边缘,必须使用中间选项卡上的border-radius定义顶部边界曲线,但底部曲线必须使用右边的标签上的选项卡定义。效果的其余部分通过使用适当背景色的选项卡后面的元素来完成。

-1

有几种方法可以完成图像。例如,你可以用透明PNG做背景图像。

0

您可以使用每个选项卡that.set边界内部DIV并设置边框为您的主选项卡,现在你有两个边境

0

快速谷歌搜索“的CSS弯曲标签”给出了一个很好的文章作为第一次打击的css-tricks.com:(Better) CSS Tabs With Round Out Borders。该代码是在那里复制和粘贴,但这里涉及到的CSS技巧的总结:

  • 使用的CSS :before:after伪元素创建标签的圆润与曲面边界半径风格的元素。 (这些具有position: absolute的伪元素基本上提供了两个额外的绘图层 - 想象一下在选项卡的<li> html元素顶部分层显示一张透明表,并在上面绘制标签的圆形元素)。
  • 在圆形元素上使用巧妙的阴影设置来隐藏底层<li>元素的方形边缘。
  • <li>元素上使用轻微的负边距可以使选项卡相互重叠。

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