三角形の罫線のグラデーションエフェクト

Question

罫線のグラデーションエフェクトを追加する必要があります。三角形の形状である境界ここで

をthe jsfiddle code

.progress-indicator-wrapper { 
 
    margin: 0 10px; 
 
    font-size: 16px; 
 
    color: #2f2f2f; 
 
    background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8); 
 
} 
 
.progress-indicator { 
 
    display: table; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 
.progress-indicator > div { 
 
    display: table-cell; 
 
    margin-top: 0; 
 
    padding: 20px; 
 
    position: relative; 
 
} 
 
.progress-indicator > div.progress-active::before { 
 
    content: " "; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    border-top: 30px solid transparent; 
 
    border-bottom: 30px solid transparent; 
 
    border-left: 20px solid #e7e7e7; 
 
} 
 
.progress-indicator > div.progress-active::after { 
 
    content: " "; 
 
    position: absolute; 
 
    right: -20px; 
 
    top: 0; 
 
    border-top: 30px solid transparent; 
 
    border-bottom: 30px solid transparent; 
 
    border-left: 20px solid #2980b9; 
 
} 
 
.progress-active { 
 
    color: #fff; 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
}

<div class="progress-indicator-wrapper"> 
 
    <div class="progress-indicator"> 
 
    <div> 
 
     <span class="progress-txt">Step 1 </span> 
 
    </div> 
 
    <div class="progress-active"> 
 
     <span class="progress-txt">Step 2</span> 
 
    </div> 
 
    <div> 
 
     <span class="progress-txt">Step 3</span> 
 
    </div> 
 
    <div> 
 
     <span class="progress-txt">Step 4</span> 
 
    </div> 
 
    <div> 
 
     <span class="progress-txt">Step 5</span> 
 
    </div> 
 
    </div> 
 
</div>

あるI 'はボーダー左' の代わりにフラットカラーのための勾配を加えることの問題に直面してMです。三角形を保つ必要があります。

または

のみCSSを使ってこれを行うには、他の方法？

Answer 1

私はそれが形を描くと国境を避けて行っています。それにはグラデーションを使用する方が良いです。

ソリューション：here is jsfiddle code

.progress-indicator-wrapper { 
 
    margin: 0 10px; 
 
    font-size: 16px; 
 
    color: #2f2f2f; 
 
    background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8); 
 
} 
 

 
.progress-indicator { 
 
    display: table; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 

 
.progress-indicator > div { 
 
    display: table-cell; 
 
    margin-top: 0; 
 
    padding: 10px; 
 
    position: relative; 
 
} 
 

 
.progress-indicator > .progress-active { 
 
    padding: 20px 20px 20px 30px; 
 
    color: #fff; 
 
    background-image: linear-gradient(to bottom, #3498db, #2980b9); 
 
} 
 
.progress-indicator > .progress-active + div { 
 
    padding-left: 20px; 
 
} 
 
/* Triangle arrow define */ 
 
.progress-active::before, .progress-active::after { 
 
    content: ""; 
 
    width: 34px; 
 
    padding-bottom: 30px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    transform: rotate(90deg); 
 
    z-index: 2; 
 

 
    -webkit-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 

 
    background-image: linear-gradient(45deg, #e7e7e7, #d8d8d8); 
 

 
    -webkit-transform-origin: 0 100%; 
 
    -ms-transform-origin: 0 100%; 
 
    transform-origin: 0 100%; 
 
    -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 

 
    transform: rotate(120deg) skewX(-30deg); 
 
} 
 

 
.progress-active::before { 
 
    top: -30px; 
 
    left: 0px; 
 
} 
 

 
.progress-active::after { 
 
    top: -30px; 
 
    right: -34px; 
 
    background-image: linear-gradient(45deg, #3498db, #2980b9); 
 
}

<div class="progress-indicator-wrapper"> 
 

 
    <div class="progress-indicator"> 
 
     <div> 
 
      <span class="progress-txt">Step 1 </span> 
 
     </div> 
 
     <div class="progress-active"> 
 
      <span class="progress-txt">Step 2</span> 
 
     </div> 
 
     <div> 
 
      <span class="progress-txt">Step 3</span> 
 
     </div> 
 
     <div> 
 
      <span class="progress-txt">Step 4</span> 
 
     </div> 
 
     <div> 
 
      <span class="progress-txt">Step 5</span> 
 
     </div> 
 
    </div> 
 

 
</div>

Answer 2

このリンクを確認してください。 怒鳴るリンクはあなたが

http://dabblet.com/gist/3725803

探しているものであり、ここであなたができる

のstyle.css

.rectangle { 
    float: left; 
    position: relative; 
    height: 80px; 
    width: 240px; 
    border: solid 1px #ccc; 
    border-right: none; 
    background: #eee linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6); 
    cursor: pointer; 
} 
.rectangle:after { 
    position: absolute; 
    top: 16px; right: -25px; 
    width: 48px; 
    height: 47px; 
    border-left: solid 1px #ccc; 
    border-top: solid 1px #ccc; 
    transform: rotate(134deg) skewX(-10deg) skewY(-10deg); 
    background: #eee linear-gradient(45deg, white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6); 
    content: ''; 
} 

HTML

<div class='rectangle'></div> 

Answer 3

を参照することができ、コードだように思えます達成するために私たちによってSVGbackground-image（ただし、ブラウザのサポートが不足しているため、すべてのブラウザで動作する可能性があります）。

SVG文書には、あなたが望むエフェクトが作成されます。

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='132' height='60' viewBox='0 0 132 60'> 
    <defs> 
     <linearGradient id='Gradient1'> 
      <stop stop-color='%233498db' offset='0%'/> 
      <stop stop-color='%232980b9' offset='100%'/> 
     </linearGradient> 
    </defs> 
    <polygon points='0,0 112,0 132,30 112,60 0,60 15,30' fill='url(%23Gradient1)'></polygon> 
</svg> 

以下に示すように、背景イメージとして使用できます。

.progress-indicator-wrapper { 
 
    margin: 0 10px; 
 
    font-size: 16px; 
 
    color: #2f2f2f; 
 
    background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8); 
 
} 
 
.progress-indicator { 
 
    display: table; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 
.progress-indicator > div { 
 
    display: table-cell; 
 
    margin-top: 0; 
 
    padding: 13px 20px; 
 
    position: relative; 
 
} 
 
.progress-active { 
 
    background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='132' height='60' viewBox='0 0 132 60'><defs> <linearGradient id='Gradient1'><stop stop-color='%233498db' offset='0%'/><stop stop-color='%232980b9' offset='100%'/></linearGradient></defs><polygon points='0,0 112,0 132,30 112,60 0,60 15,30' fill='url(%23Gradient1)'></polygon></svg>") no-repeat; 
 
    background-size: 100% 100%; 
 
    color: #fff; 
 
}

<div class="progress-indicator-wrapper"> 
 
    <div class="progress-indicator"> 
 
    <div> 
 
     <span class="progress-txt">Step 1 </span> 
 
    </div> 
 
    <div class="progress-active"> 
 
     <span class="progress-txt">Step 2</span> 
 
    </div> 
 
    <div> 
 
     <span class="progress-txt">Step 3</span> 
 
    </div> 
 
    <div> 
 
     <span class="progress-txt">Step 4</span> 
 
    </div> 
 
    <div> 
 
     <span class="progress-txt">Step 5</span> 
 
    </div> 
 
    </div> 
 
</div>