Могу ли я создать эту форму только с помощью CSS? - PullRequest
Новая
       33

Могу ли я создать эту форму только с помощью CSS?

3 голосов
/ 12 июня 2019

Я создаю раздел героя для веб-страницы, которая имеет определенную форму, на данный момент я просто использую изображение в качестве наложения для фактического фона раздела, но я пытаюсь уменьшить количество запросов, которые яmake и хотел бы знать, можно ли с помощью CSS выполнить следующую фигуру:

enter image description here

Таким образом, черная часть - это то место, куда идет фактическое изображение, тогда какбелый раздел - это то, что я пытаюсь построить с помощью CSS;

1 Ответ

7 голосов
/ 12 июня 2019

Вот идея с одним элементом и radial-gradient, чтобы приблизить его 

.box {
  width: 400px;
  height: 200px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:
    radial-gradient(100% 116.3% at top   right, transparent 99%,#fff 100%) top,
    radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  right:0;
  left:50%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}
<div class="box">

</div>

Затем вы можете отрегулировать свойства влево / вправо / вниз для управления формой овера, имея некоторый перепуск и перекрытие: 

.box {
  width: 400px;
  height: 200px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:-2px;
  right:40%;
  bottom:-45%;
  background:
    radial-gradient(100% 116.3% at top   right, transparent 99%,#fff 100%) top,
    radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  right:-2px;
  left:40%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}
<div class="box">

</div>

Вот идея использования SVG для замены radial-gradient: 

.box {
  height: 200px;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none"><path fill="white" d="M64 64 C56 30 8 48 0 0 L0 64 Z"/></svg>');
  background-size:100% 100%;
}
.box:after {
  right:0;
  left:50%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}
<div class="box">

</div>

Вот хороший онлайн-инструмент для редактирования SVG: http://jxnblk.com/paths/. Просто добавьте путь к URL в конце и отредактируйте его; 

http://jxnblk.com/paths/?d=M64 64 C56 30 8 48 0 0 L0 64 Z
...