Как задать градиент блоку так чтобы другой блок c span через transparent унаследовать часть градиента?

Question

Хочу сделать без костилей) нужно сделать как на картинке, не понимаю как это сделать в голову ничего не приходит ( на нумерацию не смотрим это пока что не нужно

вот тут я пытался что-то сделать

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: "Montserrat";
}
.container {
  width: 1170px;
  margin: 0 auto;
/*   display: flex;
  align-items: center;
  justify-content: center; */
/*   padding: 100px 0; */
}

.bg_wrap{
  position: relative;
  min-height: 100vh;
}

.bg_gradient{
  background: linear-gradient(90deg, #12B55D -33.12%, #CAE700 49.77%, #FFF113 70.01%, #FFC522 92.17%, #FF7122 118.83%);
/*   min-height: 100%; */
/*   height: 100vh; */
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.bg_white{
  background: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 2;
}
.bg_transparent{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.bg_transparent span{
  margin-bottom: 30px;
  width: 40px;
  height: 40px;
  background-color: #aaa;
  border-radius: 15px;
  z-index: 5;
}

<div class="container">
  
  <div class="bg_wrap">
    
<!--     <div class="bg_white"></div> -->
    <div class="bg_gradient"></div>
    <div class="bg_transparent">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
    </div>
  </div>
  <div class="bglinear">
    <div class="bgtransparen">
      <div class="time_line">
        
      </div>
    </div>
  </div>
  
<!--   <div class="timeline">
     <ul>
       <li>
         <div class="timeline_content">
           <h1>Title 1</h1>
           <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, odio?</p>
         </div>
       </li>
       <li>
         <div class="timeline_content">
           <h1>Title 1</h1>
           <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, odio?</p>
         </div>
       </li>
       <li>
         <div class="timeline_content">
           <h1>Title 1</h1>
           <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, odio?</p>
         </div>
       </li>
       <li>
         <div class="timeline_content">
           <h1>Title 1</h1>
           <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, odio?</p>
         </div>
       </li>
     </ul>
  </div> -->
</div>

Answer 1

Вот такой вариант на CSS.
Я думаю проще было бы реализовать это на canvas.

.list {
  display: flex;
  justify-content: center;
  width: 100%;
}

.list .-bg {
  display: block;
  width: 62px;
  height: calc(62px * 10);
  background:
    url('https://i.imgur.com/nHltOOS.png') repeat-y top center / 100% auto,
    linear-gradient(to bottom, orange, yellow);
  padding: 10px;
  position: relative;
  box-sizing: border-box;
  counter-reset: item;
}

.list .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 40%;
  background: #fff;
  border: 1px solid #09f;
  box-sizing: border-box;
  position: relative;
}

.list .item::before {
  counter-increment: item;
  content: counter(item);
  display: inline-block;
  font-size: 130%;
  color: #08f;
}

.list .item:not(:last-child) {
  margin-bottom: 20px;
}

.list .item:nth-child(2) {
  top: calc(62px * 2);
}

.list .item:nth-child(3) {
  top: calc(62px * 6);
}

.list .des {
  display: block;
  width: calc(50vw - 62px);
  background: #fff;
  border-radius: 10px;
  border: 1px solid #09f;
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
}

.list .des::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #09f;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.list .des.--l {
  right: calc(100% + 20px);
}

.list .des.--l::before {
  left: 100%;
}

.list .des.--r {
  left: calc(100% + 20px);
}

.list .des.--r::before {
  right: 100%;
}

<div class="list">
  <div class="-bg">
    <div class="item">
      <div class="des --l"></div>
    </div>
    <div class="item">
      <div class="des --r"></div>
    </div>
    <div class="item">
      <div class="des --l"></div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как задать градиент блоку так чтобы другой блок c span через transparent унаследовать часть градиента?

Ответы (1 шт):