1

Есть макет, в котором есть круг, который выходит за рамки экрана, то есть по сути видно дуги сверху и снизу. Подскажите, пожалуйста, как мне сделать круг, который бы находясь по середине выходил за рамки экрана на одинаковое расстояние и слева и справа? Спасибо

4 ответа 4

1

html, body {
  height: 100%;
  margin: 0;
  background: radial-gradient(circle at center, red, red 97%, transparent calc(97% + 1px));
}

0

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

Вот вариант без position: absolute.

https://codepen.io/Spawnet/pen/exzWBv

<div class="block">
  <div class="circle"></div>
</div>
0

https://jsbin.com/belotoqusi/edit?html,css,output

Абсолютным позиционирование можно центрировать блок и задать размеры в %, чтоб был побольше родителя.
Но не забывает родителю поставить position: relative и про z-index, который управляет видимостью слоев.

body {
  padding: 0;
  margin: 0;
}

.block {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 2px solid black;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  border: 2px solid red;
  border-radius: 50%;
}
<div class="wrapper">
  <div class="block">
    <div class="circle"></div>
  </div>
</div>

1
0

Получилось сделать таким образом:

.wrapper {
  background: #000;
  position: relative;
  height:1750px;
  overflow:hidden;
}

.circle {
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 114px 0px rgba(255, 255, 255, 0.61);
  width: 1750px;
  height: 1750px;
  left: -2000px;
  right: -2000px;
  margin: 0 auto;
  position: absolute;
}
<div class="wrapper">
  <div class="circle">
  </div>
</div>

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