は、svgでタブを作成するのに役立つ

Question

like thisのようなタブを作成する必要があります。最初は境界線のトリックで三角形を作成して平文cssでやろうとしましたが、灰色の境界を作ることは不可能に思えました。私はSVGを使ってやりたいと思っていますが、私はこれまでにそれらと仕事をしたことはありませんし、ちょっと立ち往生しています。誰かが私を正しい方向に向けることができますか？ .Thanks

.c-tabs { 
 
    background: #fff; 
 
    border: 3px solid #e9e9e9; 
 
} 
 
.c-tabs:after, 
 
.c-tabs:before { 
 
    display: table; 
 
    content: ""; 
 
} 
 
.c-tabs:after { 
 
    clear: both; 
 
} 
 
.c-tabs__item { 
 
    float: left; 
 
    width: 25%; 
 
    padding: 22px 0; 
 
    color: #0b5d98; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    font-family: nexaBlack, sans-serif; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
.c-tabs__item svg:first-of-type { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.c-tabs__item svg:last-of-type { 
 
    position: absolute; 
 
    right: -23px; 
 
    top: -2px; 
 
    bottom: -2px; 
 
} 
 

 
// .c-tabs__item :after { 
 
//  content: ''; 
 
//  position: absolute; 
 
//  width: 20px; 
 
//  height: 100%; 
 
//  top: 0; 
 
//  right: 0; 
 
//  border-left: 30px solid transparent; 
 
//  border-top: 30px solid transparent; 
 
//  border-bottom: 30px solid transparent; 
 
//  background: #fff; 
 
//  z-index: 2; 
 
////  box-shadow: 0 0 0 3px $light-base; 
 
// } 
 
    
 
// .c-tabs__item :before { 
 
//  content: ''; 
 
//  position: absolute; 
 
//  height: 100%; 
 
//  width: 20px; 
 
//  height: 100%; 
 
//  top: 0; 
 
//  right: 0px; 
 
//  border-left: 33px solid #e9e9e9; 
 
//  border-top: 33px solid transparent; 
 
//  border-bottom: 33px solid transparent; 
 
//  z-index: 1; 
 
// } 
 

 
.c-tabs__item--active { 
 
    background: #03bfd7; 
 
    color: #fff; 
 
    box-shadow: inset 0 0 0 3px #03bfd7; 
 
} 
 
.c-tabs__item--active:after { 
 
    border-left: 30px solid #03bfd7; 
 
}

<div class="c-tabs"> 
 
      <div class="c-tabs__item c-tabs__item--active" data-tab="sumar">Pasul   1:sumar</div> 
 
      <div class="c-tabs__item" data-tab="account">Pasul 2: înregistrare 
 
      <svg width="100%" height="100%"> 
 
       <line x1="0" y1="0" x2="100%" y2="0" stroke-width="3px" stroke="red"></line> 
 
       <line x1="0" y1="100%" x2="100%" y2="100%" stroke-width="3px" stroke="red"></line> 
 
       
 
      </svg> 
 
      <svg width="23px" height="100%"> 
 
       <line x1="0" y1="0" x2="90%" y2="50%" stroke-width="2px" stroke="red"></line> 
 
       <line x1="0" y1="100%" x2="90%" y2="50%" stroke-width="2px" stroke="red"></line> 
 
      </svg> 
 
      </div> 
 
      <div class="c-tabs__item" data-tab="shipping">Pasul 3: livrare</div> 
 
      <div class="c-tabs__item" data-tab="review">Pasul 4: PLată</div> 
 
      </div>

Answer 1

あなたの目標はあなたがスケッチやIllustratorでそれらを作る、あなたが、あなたのプロジェクトにインポートすることができSVGsとして、それらをエクスポートすることができ代わりにCSSのSVGさんとのそれらの三角形の形を作ることであるならば。

Hereは、Adobe Illustratorでの操作方法のガイドです。

hereは、Sketchでどのように行うかについてのガイドです。

あなたのワークフローは次のようなものになるだろう：

ステップ1 - SVGコードに書き出し形状

ステップ3 - - イラストレーターやスケッチ

ステップ2の形状を確認し、直接プロジェクトにインポートするSVGコードを