Сделать радиальный градиент () охватывающим два элемента - PullRequest
Новая
       22

Сделать радиальный градиент () охватывающим два элемента

1 голос
/ 18 октября 2019

У меня есть круг из двух полукруглых элементов. Я хотел бы использовать background: radial-radius (), чтобы круг выглядел сферически. Как я могу сделать это без наложения двух полукруглых элементов div на один круговой элемент div?

[Причина наличия двух элементов div полукруга состоит в том, что круг делится на две части. Причина, по которой вы не хотите использовать оверлей с одним тегом div, по той же причине] 

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
Make this:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
Look like this:
<div class="full-circle"></div>

Ответы [ 3 ]

2 голосов
/ 18 октября 2019

Отрегулируйте вторую позицию градиента и, что самое важное, задайте радиус для обоих градиентов, чтобы избежать автоматического значения, которое будет не одинаковым, поскольку у нас будет другое положение, а значение размера по умолчанию равно * 1003. *

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background: radial-gradient(circle 10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background: radial-gradient(circle 10em at 100px 20px, red, #000);
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Синтаксис радиального градиента: 

radial-gradient() = radial-gradient(
  [ <ending-shape> || <size> ]? [ at <position> ]? ,
  <color-stop-list>

<size>

Определяет размер конечной формы градиента. Если опущено, по умолчанию используется дальний угол . ref

Вы также можете играть с background-size / background-position, если хотите сохранить определение градиента таким же. Просто задайте размер, равный овальной форме (верхняя половина + нижняя половина). 

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 5em;
  background-image: radial-gradient(circle at 100px 100px, red, #000);
  background-size:10em 10em;
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
  background-position:top;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
  background-position:bottom;
}

.bottom-semi-circle:hover {
  transform:translateY(10px);
}
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Другая идея состоит в том, чтобы рассмотреть возможность перекрытия с путем пути клипа: 

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
}
.bottom-semi-circle {
  margin-top:-10em;
  clip-path:polygon(0 100%,100% 100%,100% 50%,0 50%);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>

Та же логика с использованием mask: 

.top-semi-circle, .bottom-semi-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
.top-semi-circle {
  -webkit-mask:linear-gradient(to bottom,white 50%,transparent 0);
  mask:linear-gradient(to bottom,white 50%,transparent 0);
}
.bottom-semi-circle {
  margin-top:-10em;
  -webkit-mask:linear-gradient(to top,white 50%,transparent 0);
  mask:linear-gradient(to top,white 50%,transparent 0);
}
.bottom-semi-circle:hover {
  transform:translateY(10px);
}
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
1 голос
/ 18 октября 2019

Использование скрытого переполнения и псевдоэлементов 

*{box-sizing: border-box}
[class$=circle] {
  width: 10em;
  height: 10em; 
  overflow: hidden;
  position: relative; 
  display: block;
  will-change: transform;
  transition: transform .2s ease
}
[class$=circle]:before {
  content: "";
  position: absolute;
  left: 0;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
[class^=top]:before { 
  top: 50%;
}
[class^=bottom]:before { 
  bottom: 50%;
}
figure{
  width: 10rem;
  height: 10rem;
}
figure:hover [class^=top] {
  transform: translate3d(0, -10px, 0)
}
figure:hover [class^=bottom] {
  transform: translate3d(0, 10px, 0)
}
<figure>
  <div class="top-semi-circle"></div>
  <div class="bottom-semi-circle"></div>
</figure>
1 голос
/ 18 октября 2019

Это может быть достигнуто с помощью calc () для позиционирования радиуса во второй в нижнем полукруге. Я использую calc (100px - 5em), потому что 100px - это смещение центра градиента в верхней половине, а 5em - высота одного полукруга.

EDIT: Я также должен был указатьразмер градиента, чтобы они соответствовали, по умолчанию размеры разные, вероятно, потому что расстояние от центра и различных сторон различно. 

.top-semi-circle {
  width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px 100px, red, #000);
}
.bottom-semi-circle {
width: 10em;
  height: 5em;
  background: radial-gradient(10em at 100px calc(100px - 5em), red, #000);
}
.top-semi-circle {
  border-radius: 10em 10em 0 0;
}
.bottom-semi-circle {
  border-radius: 0 0 10em 10em;
}
.full-circle {
  width: 10em;
  height: 10em;
  border-radius: 10em;
  background: radial-gradient(circle at 100px 100px, red, #000);
}
Make this:
<div class="top-semi-circle"></div>
<div class="bottom-semi-circle"></div>
Look like this:
<div class="full-circle"></div>
...