三角形形状边界的渐变效果 [英] Gradient effect for triangle shape borders

问题描述

需要为边框添加渐变效果。边框是三角形的

此处是 jsfiddle代码

  .progress-indicator-wrapper {margin：0 10px; font-size：16px;颜色：＃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;左：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>第1步< / span> < / div> < div class =progress-active> < span class =progress-txt>步骤2< / span> < / div> < div> < span class =progress-txt>步骤3< / span> < / div> < div> < span class =progress-txt>步骤4< / span> < / div> < div> < span class =progress-txt>步骤5< / span> < / div> < / div>< / div>  

问题，添加渐变为'border-left'而不是平面颜色。

或

任何其他方式只使用CSS？ p>

解决方案

我做了它的绘制形状，避免边界。最好使用渐变。

解决方案：这里是jsfiddle代码

  .progress-indicator- margin：0 10px; font-size：16px;颜色：＃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;} / *三角形箭头定义* /。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％;转化原点：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;右：-34px; background-image：linear-gradient（45deg，＃3498db，＃2980b9）;}  

 < div class =progress-indicator-wrapper> < div class =progress-indicator> < div> < span class =progress-txt>第1步< / span> < / div> < div class =progress-active> < span class =progress-txt>步骤2< / span> < / div> < div> < span class =progress-txt>步骤3< / span> < / div> < div> < span class =progress-txt>步骤4< / span> < / div> < div> < span class =progress-txt>步骤5< / span> < / div> < / div>< / div>  

Need to add gradient effect for borders. borders are triangle shaped

here is 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 facing issue with adding gradient for 'border-left' instead of flat color. And need to keep triangle shape.

or

Any other way to do this using only CSS?

解决方案

I have done it drawing shape and avoiding borders. It is better to use gradient for that.

Solution : 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>

这篇关于三角形形状边界的渐变效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！