Tharaka Nilupul Dharmabandu Tharaka Nilupul Dharmabandu - 2 months ago 23
CSS Question

Gradient effect for triangle shape borders

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

enter image description here

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?

Answer

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>