造型标签蚂蚁设计

Question

我正在使用 Ant 设计选项卡，并且我想仅使用 css 将标题更改为如下所示。

Tab header with outward curves

Answer 1

var menuItems = $('.main-navigation li');

menuItems.on("click", function(event) {
    
  menuItems.removeClass("active");
  
  $(this).addClass("active");
  
  $(".main-content").css({
    "background": $(this).data("bg-color")
  });
  
  event.preventDefault();
});

@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Cabin);
* {
  box-sizing: border-box;
}

body {
  padding: 1rem 3rem;
  font-family: 'Cabin', sans-serif;
  line-height: 1.4;
  min-width: 925px;
}

a {
  text-decoration: none;
}

.main-navigation {
  overflow: hidden;
  position: relative;
  padding: 0 0 0 1rem;
  /*  &::after {
      content: "";
      position: absolute;
      bottom: 16px;
      left: 0;
      width: 798px;
      height: 12px;
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
      z-index: 5;
    }*/
}
.main-navigation ul {
  list-style: none;
  padding: 0;
}
.main-navigation li {
  float: left;
  width: 12rem;
  height: 5rem;
  margin: 0 0 0 -1rem;
  position: relative;
}
.main-navigation li.active {
  z-index: 6;
}
.main-navigation a {
  position: relative;
  display: inline-block;
  color: white;
  width: 100%;
  height: 100%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 1.4rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.main-navigation svg {
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.main-navigation span {
  position: relative;
  padding: 1rem 0 0 3.3rem;
  z-index: 2;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.main-navigation .tab-1 {
  z-index: 4;
}
.main-navigation .tab-1 svg {
  fill: url(#tab-1-bg);
}
.main-navigation .tab-2 {
  z-index: 3;
}
.main-navigation .tab-2 svg {
  fill: url(#tab-2-bg);
}
.main-navigation .tab-3 {
  z-index: 2;
}
.main-navigation .tab-3 svg {
  fill: url(#tab-3-bg);
}
.main-navigation .tab-4 {
  z-index: 1;
}
.main-navigation .tab-4 svg {
  fill: url(#tab-4-bg);
}

.main-content {
  position: relative;
  z-index: 10;
  background: #76a0c0;
  margin: -1.6rem 0 0 0;
  padding: 3rem;
  border-radius: 15px;
  border-top-left-radius: 0;
}

.article {
  background: white;
  padding: 5rem;
  border-radius: 8px;
}
.article h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  color: #76a0c0;
  margin: 0 0 0.5rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TAB TEMPLATE -->
<svg height="0" width="0" style="position: absolute; margin-left: -100%;">
  
  <defs>
    
    <filter id='shadow'>
      <feComponentTransfer in="SourceGraphic">
        <feFuncR type="discrete" tableValues="0"/>
        <feFuncG type="discrete" tableValues="0"/>
        <feFuncB type="discrete" tableValues="0"/>
      </feComponentTransfer>
      <feGaussianBlur stdDeviation="1"/>
       <feComponentTransfer><feFuncA type="linear" slope="0.2"/></feComponentTransfer>
      <feOffset dx="5" dy="1" result="shadow"/>
      <feComposite in="SourceGraphic" />
    </filter>
        
    <linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-2-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(149, 190, 233, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(112, 153, 213, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-3-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(61, 149, 218, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(43, 130, 197, 1.0);" />
    </linearGradient>
    
    <linearGradient id="tab-4-bg" x1="0%" y1="0%" x2="0%" y2="65%">
      <stop offset="0%" style="stop-color: rgba(72, 204, 243, 1.0);" />
      <stop offset="100%" style="stop-color: rgba(71, 194, 243, 1.0);" />
    </linearGradient>
      
  </defs>
  
  <path id="tab-shape" class="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486
			z">
  
</svg>

<nav role="navigation" class="main-navigation">
  <ul>
    <li class="tab-1 active" data-bg-color="rgba(118, 160, 192, 1.0)">
      <a href="#home">
        <span>Home</span>
        <svg viewBox="0 0 122 40">
           <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-2" data-bg-color="rgba(112, 153, 213, 1.0)">
      <a href="#about">
        <span>About</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-3" data-bg-color="rgba(43, 130, 197, 1.0)">
      <a href="#clients">
        <span>Clients</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
    <li class="tab-4" data-bg-color="rgba(71, 194, 243, 1.0)">
      <a href="#contact">
        <span>Contact</span>
        <svg viewBox="0 0 122 40">
          <use xlink:href="#tab-shape"></use>
        </svg>
      </a>
    </li>
  </ul>
</nav>

<div class="main-content">
  <article class="article">
    <h2>An Article Right Here, Boss.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa totam cumque ad repellendus ab ea repellat aperiam accusantium labore officia est culpa fugiat eaque magnam a. Labore molestias ea at maiores inventore veritatis cupiditate cum doloribus quisquam eum et asperiores!</p>
  </article>
</div>