1

Нужно закрепить внизу страницы полукруг, при этом страница не должна листаться. Как на скриншоте. Но проблема в том ,Что при разных разрешениях этот самый полукруг, то уезжает, то вообще пропадает с экрана. Пробовал различные варианты для footer, но они не подходят для моего случая т.к у меня происходит смещение полукруга или он вообще пропадает

   .radius {
    height: 38%;

	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(203, 226, 239)"/></svg>') 0 0 / cover no-repeat;

    margin: 15% auto;
}
<div class="radius"></div>

Сделал вот так, но теперь полукруг слишком сильно вылез, должна быть лишь его половина

   .radius {


	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(203, 226, 239)"/></svg>') 0 0 / cover no-repeat;

    display: flex;
  flex-direction: column;
  height: 100%;
}
<footer class="radius"></footer>

Если убрать height: 100%; и вписать widght: 100%; , то полукруг пропадает вообще. введите сюда описание изображения

3
  • Вам обязателен svg? Или можно через css?
    – Ver Nick
    13 апр 2019 в 17:15
  • можно и через css, на сайте прочитал ,что лучше через svg, но это значения не имеет
    – Men
    13 апр 2019 в 17:16
  • по моему так красивее : codepen.io/topicstarter/pen/rbzgKw 14 апр 2019 в 3:24

1 ответ 1

2

Пример кода с div. Полукруг 38% от экрана в высоту:

.radius {
    height: 76vh;
    left: 0;
    right: 0;
    border-radius: 50%;
    position: fixed;
    background-color: #cbe2ef;
    bottom: -38vh;
}
<div class="radius"></div>

2
  • Спасибо, полукруг на разных устройствах немного деформируется, но всегда есть на экране
    – Men
    13 апр 2019 в 18:21
  • @Men у полукруга должно быть всегда соотношение 1 к 2, где в вашем случае высота = 1, ширина = 2. Иначе говоря 38% - высоты * 2. Это чисто с геометрической точки зрения, если же вы хотите «подровнять» полукруг к разным версиям экранов, то используйте медиа-запросы. Ваш svg в вашей задаче не загрузился, закачайте его куда-нибудь и вставьте нормально. Посмотрим еще раз, с свг. 13 апр 2019 в 18:27

Ваш ответ

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

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