倒弯弯片的CSS [英] CSS for inverted curved tabs

问题描述

我一直沉迷于如何为设计机构提供的这些反向弯曲的标签编码css。

请参见此处： http://max-guedy.com/images/tab.png

解决方案

EDIT 添加了具有悬停状态的示例。

我创建了一个演示示例：

jsBin演示

• 我们将棕色设置为整个ul元素


• 曲线的25x52精灵图像.png ：（将在悬停时更改bg位置）
  http://img401.imageshack.us/img401/258/bg2d.png ，我们将其设置为 li 元素，但要使用没有背景


• 此处最重要的是为 li 元素设置更高的z索引，将其降低到悬停


• 请注意将 a 元素的左填充和-left边距分别设置为允许锚点隐藏在上一个元素图像下方。

完成此操作后，您可以拥有更广泛的链接，并且模板可以完成工作！ / p>

和此CSS：

  ul＃nav {
 height：26px; 
背景：＃A15049; 
 border-bottom：1px实心#fff; 
} 
 ul＃nav li {
 position：relative; 
背景：透明网址（http://img401.imageshack.us/img401/258/bg2d.png）不重复右上方； 
高度：26像素； 
 display：inline; 
 float：left; 
 padding：0 25px 0 5px; 
 z-index：1; 
} 
 ul＃nav li a {
 padding-left：24px; 
 margin-left：-24px; 
高度：26像素； 
 display：block; 
颜色：#fff; 
} 
 
 ul＃nav li：hover {
 z-index：0; 
背景：url（http://img401.imageshack.us/img401/258/bg2d.png）不重复权-26px; 
} 
 ul＃nav li：hover a {
 background：＃CE392C; 
} 
  

I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency.

see here: http://max-guedy.com/images/tab.png

解决方案

EDIT added example with hover state.

I created a demo how I would do it:

jsBin demo

• We set the brown color to the whole ul element
• a 25x52 sprite image .png of the curve : (will change bg-position on hover) http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color.
• The most importsnt here is to setup a higher z-index to the li elements, decreasing it on hover
• Take care to set to the a elements left padding and respective -left margin to allow the anchor to 'hide' below the previous element image.

Done that you can have wide and wider links and your template will do the work!

and this CSS:

  ul#nav{
    height:26px;
    background:#A15049;
    border-bottom:1px solid #fff;
  }
  ul#nav li{
    position:relative;
    background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
    height:26px;
    display:inline;
    float:left;
    padding:0 25px 0 5px;
    z-index:1;
  }
  ul#nav li a{
    padding-left:24px;
    margin-left:-24px;
    height:26px;
    display:block;
    color:#fff;
  }
  
  ul#nav li:hover{
    z-index:0;
    background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
  }
  ul#nav li:hover a{
    background:#CE392C;
  }

这篇关于倒弯弯片的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！