2

Подскажите, как заверстать такую фигуру? Пробовал с border-radius - не смог, так же пробовал псевдо элементы :after :before - не смог.введите сюда описание изображения

1

1 ответ 1

8

Не Pixel Perfect, но близко к тому:

/* Only for demo --> */ body { margin: 0; min-height: 100vh; display: grid; place-items: center; }

.wrap {
  position: relative;
  display: inline-flex;
  /* Масштаб */
  font-size: 1.3vw;
}

ul.bg {
  list-style: none;
  position: absolute;
  z-index: -1;
  display: inline-flex;
  flex-direction: row-reverse;
  margin: 0; padding: 0;
  border-radius: 2em 10.375em 11.5625em 2em / 50% 50% 50% 50%;
  transform-origin: left center;
  perspective-origin: left center;
  transform: perspective(18.75em) rotatey(7.6deg);
  box-shadow: 0.3125em 0 0.0625em #c6e2f2;
}

ul.bg li {
  display: block;
  height: 20.5em;
  padding: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0.125em 0.125em #c6e2f2;
}
ul.bg li:nth-of-type(1) { width: 64.75em; margin: 0 0 0 -4.5em; border-radius: 0em 10.375em 11.5625em 0em / 0em 50% 50% 0em; background-color: #fbeced; }
ul.bg li:nth-of-type(2) { width: 40.8125em; margin: 0 0 0 -3em; border-radius: 0em 4.5em 3.1875em 0em / 0em 62% 30% 0em; background-color: #fff7ed; }
ul.bg li:nth-of-type(3) { width: 30.875em; margin: 0 0 0 -2em; border-radius: 0em 3em 2.0625em 0em / 0em 12.0625em 7.375em 0em; background-color: #fff7ed; }
ul.bg li:nth-of-type(4) { width: 23.1875em; margin: 0; border-radius: 2em 2em 2em 2em / 50% 50% 50% 50%; background-color: #e9f8fa; }

ul.content {
  list-style: none;
  display: flex;
  height: 20.5em;
  margin: 0; padding: 0;
}

ul.content li {
  display: grid;
  place-items: center;
  height: 20.5em;
  padding: 0;
  box-sizing: border-box;
}
ul.content li:nth-of-type(1) { width: 19.125em; color: #2ebad3; }
ul.content li:nth-of-type(2) { width: 18em; color: #333333; }
ul.content li:nth-of-type(3) { width: 16.75em; color: #333333; }
ul.content li:nth-of-type(4) { width: 18.375em; color: #cf4843; }

ul.content li > span { font-family: sans-serif; font-size: 3em; }
<div class="wrap">
  <ul class="bg">
    <li></li><li></li><li></li><li></li>
  </ul>
  <ul class="content">
    <li><span>25%</span></li>
    <li><span>45%</span></li>
    <li><span>29%</span></li>
    <li><span>11%</span></li>
  </ul>
</div>

8
  • 1
    Юра, открой тайну, с помощью какого инструмента получаешь такие точные значения = width: 40.8125em 10 сен 2021 в 16:02
  • 4
    @Alexandr_TT: https://codepen.io/UModeL/full/poPRBQR ;-)
    – UModeL
    10 сен 2021 в 16:16
  • ценный инструмент, возьму на заметку 10 сен 2021 в 16:27
  • 1
    @Alexandr_TT: когда лень отпускает, то допиливаю ))
    – UModeL
    10 сен 2021 в 16:41
  • @UModeL Спасибо вам большое!
    – LeshaZ
    13 сен 2021 в 11:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.