如何使用css制作圆形选项卡？ [英] How to make rounded tabs with css?

问题描述

我想知道是否可以使用CSS归档以下效果

我发现这些文章有点帮助，但问题是，在我的情况下，选项卡边是对角线而不是直垂直线：

HTML ：

 < ul> 
< li>示例1< / li> 
< li class =active>示例2< / li> 
< li>示例3< / li> 
< li>示例4< / li> 
< / ul> 
  

CSS ：

  / *重置ul样式* / 
 body {font-family：sans-serif; } 
 ul {
 list-style：none; 
 margin：0; 
 padding：0; 
} 
 
 ul {
 padding-left：20px; 
 Z-index：5; 
} 
 ul li {
 color：gray; 
 background：#fefefe; 
 padding：14px 24px 10px; 
 margin：0px -6px 0 10px; 
 position：relative; 
 float：left; 
 text-align：center; 
 z-index：1; 
} 
 ul li :: before {
 content：''; 
 display：block; 
 position：absolute; 
 top：0; left：0; 
 width：70％; 
 height：100％; 
 border-style：solid; 
 border-color：#eee; 
 border-width：2px 0 2px 2px; 
 border-radius：8px 0 0 0; 
 -webkit-transform：skewX（-20deg）; 
 -moz-transform：skewX（-20deg）; 
 -o-transform：skewX（-20deg）; 
 transform：skewX（-20deg）; 
 background-color：inherit; 
 z-index：-1; 
} 
 ul li :: after {
 content：''; 
 display：block; 
 position：absolute; 
 top：0; right：0; 
 width：70％; 
 height：100％; 
 border-style：solid; 
 border-color：#eee; 
 border-width：2px 2px 2px 0; 
 border-radius：0 8px 0 0; 
 -webkit-transform：skewX（20deg）; 
 -moz-transform：skewX（20deg）; 
 -o-transform：skewX（20deg）; 
 transformation：skewX（20deg）; 
 background-color：inherit; 
 z-index：-1; 
} 
 ul li.active {
 color：orange; 
 z-index：10; 
} 
 ul li.active::before，
 ul li.active::after {
 background-color：#fff; 
 border-bottom-color：#fff; 
} 
 ul li：not（[class ='active']）：hover :: before，
 ul li：not（[class ='active']）：hover :: after {
 background-color：#efefef; 
} 
  

I'm wondering if it's possible to archive the following effect with CSS

I found these articles that kind of help but the problem is that in my case the tab sides are diagonal not straight vertical lines:

http://css-tricks.com/tabs-with-round-out-borders/
http://css-tricks.com/better-tabs-with-round-out-borders/

Is it possible to do?

解决方案

Here's a proof of concept example with pure CSS. It uses pseudo-elements and rotate. It's pretty close to your source image and could get closer with some work.

Demo: http://jsfiddle.net/csDP9/9/

HTML:

<ul>
    <li>Sample 1</li>
    <li class="active">Sample 2</li>
    <li>Sample 3</li>
    <li>Sample 4</li>
</ul>

CSS:

/* Reset ul styles */
body { font-family: sans-serif; }
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    padding-left: 20px;
    z-index: 5;
}
ul li {
    color: grey;
    background: #fefefe;
    padding: 14px 24px 10px;
    margin: 0px -6px 0 10px;
    position: relative;
    float: left;
    text-align: center;
    z-index: 1;
}
ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 0 2px 2px;
    border-radius: 8px 0 0 0;
    -webkit-transform: skewX(-20deg);
       -moz-transform: skewX(-20deg);
         -o-transform: skewX(-20deg);
            transform: skewX(-20deg);
    background-color: inherit;
    z-index: -1;
}
ul li::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0;
    width: 70%;
    height: 100%;
    border-style: solid;
    border-color: #eee;
    border-width: 2px 2px 2px 0;
    border-radius: 0 8px 0 0;
    -webkit-transform: skewX(20deg);
       -moz-transform: skewX(20deg);
         -o-transform: skewX(20deg);
            transform: skewX(20deg);
    background-color: inherit;
    z-index: -1;
}
ul li.active {
    color: orange;
    z-index: 10;
}
ul li.active::before,
ul li.active::after {
    background-color: #fff;
    border-bottom-color: #fff;
}
ul li:not([class='active']):hover::before,
ul li:not([class='active']):hover::after {
    background-color: #efefef; 
}

这篇关于如何使用css制作圆形选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！