1

Помогите советом как сделать дугу как на скрине? И как реализовать положение картинки на втором скрине? Никак не могу сообразить. введите сюда описание изображения

введите сюда описание изображения

13

1 ответ 1

2

Если все изображения в формате PNG и у них достаточно качественно вырезан фон, то не вижу препятствий в использовании лишь CSS для решения:

/* Only fo demo */ body{margin:0;min-height:100vh;background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#fff8,#000f);background-position:0% 0%;background-repeat:no-repeat;background-size:auto;display:flex;flex-flow:column nowrap;justify-content:space-around;align-items:center;gap:1em}

.avatar {
  position: relative;
  height: 45vh;
  width: 45vh;
  border: 10px solid #ff8f17;
  border-radius: 50%;
  background-color: #1a1d6e;
}

.avatar img {
  position: absolute;
  bottom: -10px;
  left: 50%;
  height: 150%;
  width: inherit;
  transform: translatex(-50%);
  object-fit: cover;
  border: inherit;
  border-color: transparent;
  border-radius: 0 0 150% 150% / 0 0 100% 100%;
}
<div class="avatar">
  <img src="https://www.pikpng.com/pngl/b/77-770414_a-group-of-community-people-peanut-butter-and.png" alt="">
</div>

То же относится и к фону с простыми скруглениями:

/* Only fo demo */ body{margin:0;min-height:100vh;background-color:rgba(255,255,255,1);background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#fff8,#000f);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}

footer {
  position: relative;
  height: 358px;
  background-image: url('https://www.pikpng.com/pngl/b/29-291730_happy-people-image-happy-people-transparent-background-clipart.png'), radial-gradient(farthest-corner at 50% 100%, #f08f02 70%, #f08f0200 calc(70% + 3px));
  background-size: auto 100%, 200% 100%;
  background-repeat: no-repeat;
  background-position: 50% calc(100% + 40px), 50% 0;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 100%;
  background-color: #1a1d6e;
}
<footer>
  <div class="footer"></div>
</footer>

Никаких псевдоэлементов и SVG. Используйте технологии по назначению.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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