CSS полосы с бордюром

Question

Я тестировал несколько часов, но я не могу заставить изображение границы делать то, что я хочу.

Я пытаюсь добавить нижнюю границу в div с горизонтальнымполосы.Это 2px серый, 2px белый и 2px серый;то есть серые и белые полосы.

Вот так:

Вот что у меня такдалеко:

.box {
  height: 50px;
  background-color: #74c5fc;
  border-style: solid;
  border-image:
      linear-gradient(
         to top, 
         #ccc 0%, 
         #ccc 33%, 
         #fff 33%, 
         #fff 66%, 
         #ccc 66%, 
         #ccc 100%
      ) 1 1 / 0 0 6px 0
    ;
}

<div class="box"></div>

Что я делаю не так?

Answer 1

Используйте большое значение среза!

.box {
 height:100px;
 background-color: #74c5fc;
 border-style:solid;
 border-image:
      linear-gradient(
         to top, 
         #ccc 0%, 
         #ccc 33%, 
         #fff 33%, 
         #fff 66%, 
         #ccc 66%, 
         #ccc 100%
      ) 100 /0 0 6px 0;
}

<div class="box">

</div>

Или вы можете сделать так:

.box {
 height:100px;
 padding-bottom:6px;
 background:
  linear-gradient(#fff,#fff) 0 calc(100% - 2px)/100% 2px no-repeat, 
  linear-gradient(#ccc,#ccc) bottom/100% 6px no-repeat,
  #74c5fc content-box;
}

<div class="box">
</div>

Или вот так:

.box {
 height:100px;
 padding-bottom:6px;
 background:
  linear-gradient(to bottom, #ccc 2px,#fff 2px,#fff 4px,#ccc 4px) bottom/100% 6px no-repeat,
  #74c5fc content-box;
}

<div class="box">
</div>

Вы также можете рассмотреть box-shadow:

.box {
 height:100px;
 margin-bottom:6px;
 box-shadow:
  0 2px 0 #ccc,
  0 4px 0 #fff,
  0 6px 0 #ccc;
 background:#74c5fc;
}

<div class="box">

</div>