Как мне сделать тонкую изогнутую линию-разделитель между двумя изображениями?

Как таковой: https://i.stack.imgur.com/UdHNE.png

Граница CSS, путь клипа и т. д.?

Я пробовал следующее:

div#box{
  width: 38px;
  height: 500px;
  border: 13px solid black;
  border-color: transparent black transparent transparent;
  border-radius: 0 100% 100% 0;
}
<div id = "box"></div>

Но это не дает мне результата, который я ищу (кривая слишком тонкая).

Я также пытался использовать путь обрезки, но прозрачный элемент не будет «врезаться» в другой, очевидно, поскольку он прозрачен.

body {
  background-color: lightblue;
}
.one {
  height: 500px;
  width: 38px;
  background-color: white;
  clip-path: ellipse(38px 50% at 0% 50%);
  position: absolute;
  right: 50%;
  top: 0;
}
.two {
  height: 500px;
  width: 38px;
  background-color: transparent;
  clip-path: ellipse(38px 50% at 0% 50%);
  position: absolute;
  right: calc(50% + 13px);
  top: 0;
}
<div class = "one"></div>
<div class = "two"></div>

Любая помощь будет принята с благодарностью.

Мы здесь не для того, чтобы делать вашу домашнюю работу. Что вы пробовали, что сработало, а что нет?

cloned 30.03.2022 17:48

Пожалуйста, покажите нам, что вы пробовали. См. stackoverflow.com/help/минимально-воспроизводимый-пример

A Haworth 30.03.2022 17:50

Попробуйте обрезать оба контейнера вместо создания белого зазора.

ZeroWorks 31.03.2022 11:19
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Можете ли вы попробовать это и играть только со вторым [180%] и третьим [-2%] значением.

Здесь мы создаем требуемый clip-path, затем создаем другой div, который создаст нам среднее пространство и применяет position: absolute ,overflow:hidden для создания того же клипа в красном div, а затем мы устанавливаем background-color среднего div таким же, как цвет фона экрана.

z-index должны быть .one > .middle > .two

clip-path: ellipse(100% 180% at -2% 50% ) 

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  place-items: center;
  background-color: bisque;
}


.one{
  position: relative;
  height: 500px;
  width: 500px;
  background-color: green;
  clip-path: ellipse(100% 180% at -2% 50% ) ;
  z-index: 3;
}

.middle{
  position: absolute;
  z-index: 2;
  height: 500px;
  width: 500px;
  clip-path: ellipse(100% 180% at -2% 50% ) ;
  left:25px;
  overflow: hidden;
  background-color: bisque;
}
.two{
  position: relative;
  z-index: 1;
  right:25px;
  height: 500px;
  width: 500px;
  background-color: red;
}
<div class = "one"></div>
<div class = "middle"></div>
<div class = "two"></div>

Другие вопросы по теме