Эффект градиента для границ формы треугольника

Ответ 1

Я сделал рисунок и избегал границ. Для этого лучше использовать градиент.

Решение: вот код 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>

Ответ 2

Вы можете достичь этого с помощью 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>

Ответ 3

попробуйте проверить эту ссылку. похоже, что ссылка ниже - это то, что вы ищете

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>