需要为边框添加渐变效果。边框是三 Angular 形的
.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>
我面临着为“border-left”添加渐变而不是纯色的问题。并且需要保持三 Angular 形。
或
还有其他方法可以仅使用 CSS 来做到这一点吗?
最佳答案
您可以使用 SVG
as 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>
关于css - 三 Angular 形边框的渐变效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39652551/