Html 把这些标签弄对有这么多困难吗

我正试图创建具有倒圆角的选项卡，就像使用纯css3/html创建的选项卡一样

我似乎做得不对。我已经尝试了各种解决方案，甚至是jquery：我就是不能让我的标签看起来像图片中的标签一样。我是否不得不使用图像

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>

<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>

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>

<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>

小提琴

   .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;
}

我遵循了这个示例，并根据您的要求进行了修改

---

您也可以尝试此功能

请提供您尝试过的示例、JSFIDLE或代码，在此处使用代码：+1，以利用实时时间完成工作。。。无论如何，这就是为什么我们有时会先问OP“你尝试了什么”，因为第一个Goog链接结果（搜索答案）正是你在上面发布的结果。我理解，这就是为什么我的第一个评论是关于他尝试过的示例或JSFIDLE。我发布它是因为我修改了一点。下次我会记住你的建议。谢谢你的帮助。我真是太感谢你了