Ответы пользователя по тегу CSS
  • Как сделать подобный border?

    Akula1926
    @Akula1926 Автор вопроса
    Web-разрабочик
    Сделал эту камасутру, получилось как то так:
    <div class="example__border">
        <div class="example__numbers">
            <p class="example__numbers-text">5 кг</p>
            <p class="example__numbers-info">снижение веса</p>
        </div>
        <div class="example__numbers">
            <p class="example__numbers-text">60 ДНЕЙ</p>
            <p class="example__numbers-info">затрачено времени</p>
        </div>
    </div>

    .example__border {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .example__numbers {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      position: relative;
      width: 165px;
      text-align: center;
      margin-right: 45px;
      border: 2px solid #CDCDCD;
      padding-bottom: 10px;
    }
    .example__numbers-text {
      text-transform: uppercase;
      font-size: 30px;
      margin-top: 15px;
    }
    .example__numbers-info {
      width: 142px;
      position: absolute;
      font-size: 14px;
      margin-top: 5px;
      background-color: #F2F2F2;
      top: 74%;
    }

    Итог на скриншоте:
    629e33f7a27e1388290062.png
    Ответ написан
    Комментировать