Как сверстать карточку с серой полосой внутри и буквой в центре?

Рейтинг: 0Ответов: 1Опубликовано: 09.04.2023

Как сверстать карточку? http://joxi.ru/BA0Yx1OuqP5bVr

Не получается сместить див в лево и 50%, нужно чтобы он тянулся.

     `<li class="sd_b5__card">
      <div class="icon-b5">
        <svg class="sd_b5__card__icon" width="55" 
       height="41">
          <use href="./img/sprite.svg#icon-hs32"></use>
        </svg>
      </div>
      <div>
      <div class="wrap">
        <div class="wrap__border">
          <span class="wrap__border__letter">B</span>
        </div>
      </div>
      </div>
      <h4 class="sd_b5__subtitle">Setting the Time</h4>
      <p class="sd_b5__text">After the request, we set 
      a convenient date and time</p>`
    </li>
html5
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Пример

.cards {
  display: flex;
}

.card {
  flex-grow: 1;
  flex-basis: 0;
  position: relative;
  text-align: center;
  border: 1px solid #000;
}

.card__letter {
  position: relative;
}

.card__letter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  transform: translateY(-50%);
  z-index: -1;
}

.card:first-child .card__letter::before,
.card:last-child .card__letter::before {
  width: 50%;
}

.card:first-child .card__letter::before {
  left: 50%;
  background: linear-gradient(to right, #fff, #ccc);
}

.card:last-child .card__letter::before {
  left: 0;
  background: linear-gradient(to right, #ccc, #fff);
}
<div class="cards">
  <div class="card">
    <h2 class="card__title">Title</h2>
    <div class="card__letter">A</div>
    <h3 class="card__subtitle">Subtitle</h3>
  </div>
  <div class="card">
    <h2 class="card__title">Title</h2>
    <div class="card__letter">B</div>
    <h3 class="card__subtitle">Subtitle</h3>
  </div>
  <div class="card">
    <h2 class="card__title">Title</h2>
    <div class="card__letter">C</div>
    <h3 class="card__subtitle">Subtitle</h3>
  </div>
  <div class="card">
    <h2 class="card__title">Title</h2>
    <div class="card__letter">D</div>
    <h3 class="card__subtitle">Subtitle</h3>
  </div>
</div>