Блог

Главная - Вопросы по программированию - CSS полукруглый фон

CSS полукруглый фон

#css

#css

Вопрос:

Чего я пытаюсь достичь: ссылка на изображение

Как выглядит мой код в настоящее время:

 .half-circle {
  background-color: white;
}  
 <div style="background-color: black;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should't be moved</div>

Я пробовал использовать отступы с белым фоном и радиусом 500, но это уводит текст вниз.

Комментарии:

1. Код, который вы включили, на самом деле недостаточно полон для того, к чему вы стремитесь. Я хочу помочь, но я не хочу выполнять кучу напряженной работы, прежде чем перейти к реальному решению.

2. Какой радиус / отступ? Все, что вы предоставили, это белый фон.

Ответ №1:

Вы можете взглянуть на radial-gradient() и немного изменить размер 

 .half-circle {
  min-height: 12vw;
  padding-bottom: 4%;
  background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}

.half-circle img {
  display: block;
  margin: auto;
  max-width: 15vw
}  
 <div style="background-color: black;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should'nt be moved</div>

Комментарии:

1. вы также можете удалить внешнюю оболочку и включить черный цвет в градиент

Ответ №2:

Этого можно достичь с помощью CSS, если вы поставите свои .half-circle a border-bottom-left-radius и border-bottom-right-radius . Это закруглит нижние углы фигуры в полукруг. Я также добавил немного дополнительного стиля, чтобы немного лучше соответствовать вашему скриншоту.

 .container {
  padding-bottom: 10px;
  text-align: center;
}

.half-circle {
  background-color: white;
  margin: 0 auto;
  height: 100px;
  width: 400px;
  border-bottom-left-radius: 800px;
  border-bottom-right-radius: 800px;
  padding: 10px 0 20px;
  text-align: center;
}
   
img {
  max-height: 100%;
  width: auto;
}  
 <div class="container" style="background-color: #000;">
  <div class="half-circle">
    <img src="https://i.imgur.com/WBtkahj.png" />
  </div>
</div>
<div>Some text here that should't be moved</div>

Комментарии:

1. Это то, что я искал. Большое вам спасибо! Я пытался с тех пор, как опубликовал около часа назад…

2. Добро пожаловать!! Если вы нашли этот ответ полезным, пожалуйста, примите его как решение. Спасибо!