HTML双曲面标签设计

Question

有什么方法可以做这种标签设计吗？我似乎无法在网上获得良好的代码来完成它。每个选项卡有两个border-radius。它甚至可能吗？

Answer 1

您可以在每个标签中使用内部div并为主标签设置该.set边框的边框，现在您有两个边框

Answer 2

快速Google搜索“css的曲线标签”，css-tricks.com发布了一篇优秀的文章，作为第一个热门话题：(Better) CSS Tabs With Round Out Borders。代码就在那里进行复制和粘贴，但这里是所涉及的css技巧的摘要：

• 使用css :before和:after伪元素创建带有弯曲边框半径样式的标签的圆角元素。 （这些带有position: absolute的伪元素实际上提供了两个额外的绘图层 - 考虑在选项卡的<li> html元素顶部分层透明表，并在其上绘制选项卡的圆角元素。 / LI>
• 在圆角元素上使用巧妙的框阴影设置隐藏基础<li>元素的方形边缘。
• 在<li>元素上使用轻微的负边距，以允许标签相互重叠。

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

Answer 3

这绝对有可能，但有点棘手，因为必须在某种程度上模拟效果。例如，对于中间选项卡的右边缘，必须使用中间选项卡上的 public static bool IsApplicationAlreadyRunning() { Process[] processes = Process.GetProcessesByName(Process.GetCurrentProcess().ProcessName); return processes.Length > 1; } 定义顶部边框曲线，但必须使用右侧的border-radius来定义底部曲线/ em>标签。其余的效果是通过在选项卡后面添加具有适当背景颜色的元素来完成的。

Answer 4

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