html - 很难正确设置这些选项卡

Question

我正在尝试使用纯 css3/html 创建带有倒圆 Angular 的选项卡。

我好像不太明白。我尝试了各种解决方案，甚至是这个 jquery 解决方案:http://jquery.malsup.com/corner/我只是无法让我的标签看起来像标签在图像中的样子。我必须使用图像吗？

HTML

<div class="menu">
    <div class="outer_bg_left">
        <div class="outer">
            <div class="outer_shadow">
            </div>
        </div>    
    </div>

    <ul>
       <li class="menu_item_cont"><div class="menu_item">Item 1</div></li>
       <li class="menu_item_cont"><div class="menu_item">Item 2</div></li>
       <li class="menu_item_cont"><div class="menu_item">Item 3</div></li>
    </ul>

    <div class="outer_bg_right">
       <div class="outer">
          <div class="outer_shadow">
          </div>
       </div>   
    </div>
 </div>

CSS

.outer_bg_left, .outer_bg_right {
    float: left;
    width: 70px;
    background-color: #994;
    height: 15px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.outer_bg_left .outer {
    height: 25px;
    border-radius:  0 10px 0 0; 
    background-color: #fff;
}

.outer_bg_right .outer {
    height: 25px;
    border-radius:  10px 0 0 0;
    background-color: #fff;
}

.outer_bg_left .outer_shadow, .outer_bg_right .outer_shadow {
    box-shadow:  0 0 5px 2px rgba(0,0,0, .7) inset;
    padding-bottom: 10px;
    margin-bottom: -10px;
    height: 25px;
}

.outer_bg_left .outer_shadow {
    border-radius: 0 10px 0 0;
    padding-left: 30px;
    margin-left: -30px;
}

.outer_bg_right .outer_shadow {
    border-radius:  10px 0px 0 0;
    padding-right: 30px;
    margin-right: -30px;
}

.menu_item_cont {
    background-color: #994;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 5px 2px rgba(0,0,0, .7);
    background-color: #994;
    display: block;
    float: left;
}

.menu_item {    
    border-radius: 0 0 10px 10px; 
    background-color: #994;
    height: 20px;
    padding: 5px 10px;

    font-family: Arial;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
}

.menu_item:hover {
    background-color: #000;
    border-radius: 10px;
    height: 30px;
    line-height: 30px;
    color: #fff;
}

Answer 1

HTML

<ul class="tabs group">
  <li class="active"><a href="#one">Tab 1</a></li> 
  <li><a href="#two">Tab 2</a></li> 
  <li><a href="#three">Tab 3</a></li>
  <li><a href="#three">Tab 4</a></li> 
</ul>

CSS

   .tabs { 
        list-style: none; 
        margin: 60px auto 0; 
        width: 660px;
    }
        .tabs li { 
          /* Makes a horizontal row */
            float: left; 

            /* So the psueudo elements can be
               abs. positioned inside */
            position: relative; 
        }
        .tabs a { 
          /* Make them block level
             and only as wide as they need */
          float: left; 
          padding: 10px 40px; 
          text-decoration: none;

          /* Default colors */ 
          color: black;
          background: #ddc385; 

          /* Only round the top corners */
          -webkit-border-top-left-radius: 15px;
          -webkit-border-top-right-radius: 15px;
          -moz-border-radius-topleft: 15px;
          -moz-border-radius-topright: 15px;
          border-top-left-radius: 15px;
          border-top-right-radius: 15px; 
        }
        .tabs .active {
          /* Highest, active tab is on top */
          z-index: 3;
        }
        .tabs .active a { 
          /* Colors when tab is active */
          background: black; 
          color: white; 
        }
        .tabs li:before, .tabs li:after, 
        .tabs li a:before, .tabs li a:after {
          /* All pseudo elements are 
             abs. positioned and on bottom */
          position: absolute;
          bottom: 0;
        }
        /* Only the first, last, and active
           tabs need pseudo elements at all */
        .tabs li:last-child:after,   .tabs li:last-child a:after,
        .tabs li:first-child:before, .tabs li:first-child a:before,
        .tabs .active:after,   .tabs .active:before, 
        .tabs .active a:after, .tabs .active a:before {
          content: "";
        }
        .tabs .active:before, .tabs .active:after {
          background: black; 

          /* Squares below circles */
          z-index: 1;
        }
        /* Squares */
        .tabs li:before, .tabs li:after {
          background: #ddc385;
          width: 10px;
          height: 10px;
        }
        .tabs li:before {
          left: -10px;      
        }
        .tabs li:after { 
          right: -10px;
        }
        /* Circles */
        .tabs li a:after, .tabs li a:before {
          width: 20px; 
          height: 20px;
          /* Circles are circular */
          -webkit-border-radius: 10px;
          -moz-border-radius:    10px;
          border-radius:         10px;
          background: #fff;

          /* Circles over squares */
          z-index: 2;
        }
        .tabs .active a:after, .tabs .active a:before {
          background: #ddc385;
        }
        /* First and last tabs have different
           outside color needs */
        .tabs li:first-child.active a:before,
        .tabs li:last-child.active a:after {
          background: #fff;
        }
        .tabs li a:before {
          left: -20px;
        }
        .tabs li a:after {
          right: -20px;
        }

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}

fiddle http://jsfiddle.net/raunakkathuria/VLE9K/

我按照这个例子并根据您的要求进行了修改 http://css-tricks.com/tabs-with-round-out-borders/

你也可以试试这个 http://webdesign.about.com/od/layout/ss/css-3-tabs.htm