三角形邊框的漸變效果

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>

我米麪臨問題與添加梯度關於 '左邊框'，而不是平坦的顏色。並且需要保持三角形的形狀。

或

任何其他方式做到這一點只用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

你可以我們用SVG來實現它作爲background-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>