需要为边框添加渐变效果。边框是三角形的
.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吗?
我已经完成绘制形状并避免边界的操作。最好使用渐变。
解决方案:这是jsfiddle代码
.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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句